Tailwind CSS Spacing Reference

You’re writing p-6 and need to know: is that 24px or 1.5rem? What about w-72 — is that 18rem or 288px? The Tailwind docs spread spacing values across padding, margin, width, height, and gap pages. You need one searchable table that maps every class name to its CSS value and pixel equivalent.

Why This Reference (Not the Tailwind Docs)

The Tailwind docs list spacing values across separate utility pages. This tool puts all spacing, sizing, and typography values on one searchable page — class name → CSS value → px equivalent. Search for 6 and see p-6 = 1.5rem = 24px, m-6 = 1.5rem = 24px, w-6 = 1.5rem = 24px all at once. Everything runs in your browser.

What Is This Tool?

The Tailwind CSS Spacing Reference is a searchable cheat sheet covering every spacing, sizing, and typography utility in the Tailwind CSS v3 default configuration. Instead of digging through documentation, you can search for a class name like p-4, a value like 1rem, or a pixel size like 16px — and instantly see the matching Tailwind class plus its full CSS value.

Click any class name, CSS value, or px equivalent to copy it to your clipboard.

The Tailwind Default Spacing Scale

Tailwind’s core spacing scale is used across p-* (padding), m-* (margin), gap-* (flex/grid gap), w-* (width), h-* (height), and many other utilities. The scale is based on 0.25rem units at a 16px base font size:

The full table in the tool above includes all 35 spacing steps from 0 through 96.

rem to px Conversion

Tailwind assumes a base font size of 16px (the browser default). The conversion formula is:

px = rem × 16

So p-4 = 1rem = 1 × 16 = 16px. If you change the browser’s root font size (or set font-size on the html element), all rem-based values scale proportionally.

Width and Height Utilities

In addition to the spacing scale, w-* and h-* utilities include:

Fractional Widths

Keyword Widths and Heights

Tip: Use h-dvh instead of h-screen for mobile layouts — dvh accounts for dynamic browser chrome (address bar appearing/disappearing on scroll).

Max-Width Named Scale

The max-w-* utilities include a named scale designed for common container widths:

max-w-prose (65ch) is particularly useful for article text — it limits line length to roughly 65 characters, which improves readability according to typography research.

Border Radius

Common patterns:

• Cards and panels: rounded-lg or rounded-xl
• Buttons: rounded-md or rounded-lg
• Avatars and icons: rounded-full
• Input fields: rounded-lg with border

Font Size and Line Height

Tailwind’s text-* utilities set both font-size and a default line-height:

Note: At 5xl and above, Tailwind sets line-height: 1 (tight) because display-size headings typically need custom leading.

Letter Spacing

Typography tips:

• Headlines at large sizes: tracking-tight or tracking-tighter — large type looks too spaced-out at defaults
• Uppercase labels and badges: tracking-wide or tracking-wider — improves readability of ALL CAPS text
• Body copy: tracking-normal — don’t change what you don’t need to

Line Height Utilities

leading-* controls line-height independently of font-size:

Readability rule of thumb: Body text at leading-relaxed (1.625) or leading-normal (1.5) improves reading speed for paragraphs. Headlines at leading-none or leading-tight look more intentional.

Using This Reference in Practice

When building a component:

1. Use the spacing scale for consistent padding and margin — p-4, p-6, px-3 py-2
2. Use named max-widths for container width — max-w-4xl mx-auto
3. Use fractional widths for column layouts — w-1/2, w-1/3
4. Use rounded-lg as the default card radius; rounded-full for avatars

Memorizing the scale:

• p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px — double each step
• p-4 is your base unit — think of it as “one spacing step”
• Padding inside buttons is typically px-4 py-2 (horizontal larger than vertical)

Frequently Asked Questions

What does p-4 equal in pixels? p-4 = 1rem = 16px at the default 16px base font size. It sets padding: 1rem on all four sides.

How do I set different padding on each side? Use directional utilities: pt-* (top), pb-* (bottom), pl-* (left), pr-* (right), px-* (horizontal = left + right), py-* (vertical = top + bottom). For example, px-6 py-3 is common for buttons.

What is the difference between w-full and w-screen? w-full = 100% of the parent container. w-screen = 100vw (viewport width). If your container has padding, w-full respects it, while w-screen ignores it and spans the full window. To create a full-bleed section inside a padded container, you often need w-screen -mx-4 or similar negative margin tricks.

Which Tailwind class equals exactly 24px? p-6, w-6, h-6, gap-6, m-6 — all of them apply 1.5rem = 24px from the spacing scale. Search “24px” or “1.5rem” in the tool above to see all matching classes.

How does line-height interact with font-size in Tailwind? Tailwind’s text-* utilities set both font-size and a default line-height together. You can override line-height independently with leading-*. For example, text-lg leading-tight sets font-size: 1.125rem with line-height: 1.25 instead of the default 1.75rem.

What is max-w-prose used for? max-w-prose sets max-width: 65ch, limiting a text container to approximately 65 characters wide. This is the typographic sweet spot for comfortable reading — wide enough for natural line breaks but narrow enough to prevent eye strain from tracking across long lines.