Spacing and Type

Most of what you type in Tailwind is a number on a scale. p-4, gap-6, w-64 and text-lg are not arbitrary: each number is a step, and the steps are the same everywhere, so a page built from them looks consistent without you measuring anything. This chapter covers the scales for space, size and text. Colour is the next chapter.

The Spacing Scale

Padding, margin, gap, width, height and several other things all share one scale, built from a single theme variable:

That is the whole idea: the number in a class is a multiple of 0.25rem, which is 4px at the default font size. p-4 is four of those, 16px. Measured values for the steps you will use most:

To go from a design measurement to a class, divide the pixels by 4: 24px of padding is p-6, a 320px width is w-80. The table is a sample, not a list of the only values. In v4 any number works, because the rule is just "that number times the spacing": I compiled p-13 and got calc(var(--spacing) * 13), and p-3.5 gave calc(var(--spacing) * 3.5). Two special cases are not multiples: p-px is exactly 1px, and p-0 is 0px.

When you need a value that is not on the scale, put it in square brackets, or point at a CSS variable with parentheses:

Use these sparingly: the whole point of the scale is that most values come from it. Chapter 10 returns to arbitrary values. And because the scale comes from one variable, changing --spacing in your theme rescales every padding, margin, gap and size at once (chapter 9).

Padding and Margin

Padding is the space inside an element, margin is the space outside it. The letter picks which, and the suffix picks the side:

Margin has two extras that padding does not. A negative margin puts a minus sign in front of the class: -mt-2 compiles to margin-top: calc(var(--spacing) * -2), which pulls an element up by 8px (or -mx-1 for both sides). And auto margins: mx-auto is margin-inline: auto, the classic way to centre a block that has a fixed width. I measured it: a w-64 box (256px) with mx-auto inside a 900px page got a 322px margin on the left, which is exactly (900 − 256) ÷ 2. mt-auto pushes an element away from what is above it, which becomes useful once you meet flexbox.

Gap, Space-Between and Dividers

To put space between the children of a flex or grid container, use gap. It belongs to the container, so you set it once:

gap-x-* is the space between columns and gap-y-* the space between rows. Gap also adds space between the rows when items wrap onto several lines, which margins on the children cannot do cleanly. There is an older way, still common in Tailwind code: space-x-4 and space-y-2. They work on any container, including a plain block, and this is what they generate:

So space-y-2 puts a bottom margin on every child except the last, rather than a gap on the parent. Use gap when the container is flex or grid (chapter 4), and space-y-* for a simple stack of blocks. The divide-y and divide-x classes work the same way with borders: a 1px border between children, on every child except the last.

Width and Height

Widths and heights use the same scale, plus fractions, keywords and a few viewport units. The measured results come from a 600px-wide parent:

A few points. h-screen is 100vh, which on phones is the height with the browser toolbar hidden, so a "full-height" section can run behind the toolbar. The newer units fix that: h-svh is the small viewport (toolbars showing), h-lvh the large one, and h-dvh the dynamic one that follows the toolbar as it moves. For a full-height page, min-h-dvh is usually what you want. The named maximum widths come from the container scale (max-w-sm is 24rem, max-w-xl 36rem, max-w-3xl 48rem, max-w-7xl 80rem), which is the reusable way to cap a column. And max-w-prose caps a column at about 65 characters, a comfortable line length for reading: ch is the width of the digit 0 in the current font, so the pixel width depends on your font.

Font Size and Line Height

The type scale is a set of named sizes, each with a matching line height. Measured, with each class applied to a paragraph:

Each class sets two properties, and the line height is set so it can be overridden:

The var(--tw-leading, …) means "use the line height someone chose with a leading-* class, and fall back to the size's default". That is why text-lg leading-tight works in either order: the leading class always wins. There are two ways to change the line height:

• A leading class: leading-none (1), leading-tight (1.25), leading-snug (1.375), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2). These are multiples of the font size: on a 16px paragraph I measured 16, 20, 22, 24, 26 and 32px, and text-lg leading-tight gave 22.5px (18 × 1.25). You can also give a number from the spacing scale, such as leading-6, which is a fixed calc(var(--spacing) * 6) (24px), or an arbitrary value, leading-[1.3].
• A slash after the size: text-lg/7 sets the size and the line height together. It compiled to font-size: var(--text-lg) and line-height: calc(var(--spacing) * 7), and measured 18px with a 28px line. It is shorter than two classes and keeps them together.

For a size that is not on the scale, text-[17px] sets just font-size: 17px (no line height).

Weight, Family and Letter Spacing

The weights only change anything if the font has those weights, so font-thin on a font with no thin face just shows the nearest one. The tracking classes are in em, so they scale with the text: a large heading gets a larger adjustment than small text for the same class. Large headings usually look better slightly tighter (tracking-tight) and small uppercase labels slightly looser (tracking-wide or tracking-widest). Chapter 9 shows how to add your own font families.

Text Layout: Alignment, Wrapping and Truncation

A group of small classes controls how text sits and breaks. Everything here is copied from the generated CSS:

The Tailwind compatibility page lists text-wrap: balance among the newer features with limited browser support, so treat text-balance as an enhancement: in a browser that lacks it the heading still displays, just without balanced lines.

Truncating to one line is truncate, and it needs two things: a width that is smaller than the text, and (inside flexbox) a parent that is allowed to shrink. I measured the failure. A 192px-wide flex row holds a wrapper with a long title in a truncate paragraph:

The wrapper refused to shrink below the width of its text, so the paragraph inside was never narrower than its text and there was nothing to truncate. Adding min-w-0 to the wrapper (class="min-w-0 flex-1") gave a 192px wrapper and a 192px paragraph, with the ellipsis showing. Putting truncate directly on the flex item also worked (192px). The rule to remember: a flex child's minimum width is its content, unless you say min-w-0, so any wrapper between the flex container and the truncating text needs it.

Clamping to several lines is line-clamp-3. A 192px paragraph of placeholder text was 240px high (ten lines of 24px); with line-clamp-3 it was 72px, exactly three lines, with an ellipsis at the end of the third. line-clamp-none undoes it (for example at a larger breakpoint, once chapter 7 covers those).

Lists

Preflight removed the bullets and numbers (chapter 1, Exercise 3), so you add them back with a class:

A typical list is list-disc pl-5: the bullets, and padding on the left so the bullets (which sit outside the text, list-outside being the default) are not cut off by the edge of the container. Use space-y-1 or gap (on a flex column) for the space between items.

Putting It Together

Here is an article header built only from classes in this chapter. I measured every value in headless Chrome so you can see what each class contributed:

Look at the title: text-4xl alone would give a 40px line height, but leading-tight replaced it with 1.25 × 36 = 45px, as the --tw-leading variable promised. A small uppercase label, a large tight heading, a slightly larger lede and a looser body: four levels of hierarchy from thirteen classes, all on the scale.

Hands-On Exercises