Spacing & Layout

Convert px to the scale

Tailwind v4’s spacing scale is unbounded and accepts fractional steps. Divide the px value by 4 to get the token.

Design value	Use	Not
20px	`w-5`	`w-[20px]`
138px	`w-34.5`	`w-[138px]`
364px	`max-w-91`	`max-w-[364px]`
1728px	`max-w-432`	`max-w-[1728px]`
18px	`w-4.5`	`w-[18px]`

Large numbers are fine — the scale doesn’t stop. max-w-432 is valid.

When arbitrary values are correct

Keep [Npx] when the value is genuinely off-scale and the exact pixel matters:

Hairlines — h-[2px] for a 2px rule reads better than h-0.5
Sub-pixel alignment — text-underline-offset-[3px]
Values tied to an SVG viewBox or a transform under 8px

Figma export artifacts like w-[13.057px] are not design intent — round to the scale.

The container utility

Use .container. Don’t compose one.

<!-- Good -->
<div class="container">

<!-- Wrong — .container already sets these -->
<div class="container px-4 mx-auto">
<div class="max-w-432 mx-auto px-gutter">
<div class="px-3 lg:container">

.container already applies margin-inline: auto, width: 100%, max-width: 1728px, and a responsive padding-inline: var(--gutter).

A max-width inside a container is fine — that’s a content-width clamp, not a container:

<div class="container">
  <div class="max-w-300">Narrower content column</div>
</div>

A responsive-prefixed container (md:container) is also fine when a section is deliberately full-bleed below that breakpoint.

Custom properties

Tailwind v4 uses parentheses for bare custom properties:

<!-- v4 — correct -->
<div class="pt-(--padding-top) bg-(--background)">

<!-- v3 — no longer wraps in var() -->
<div class="pt-[--padding-top]">

Brackets are still correct for genuine arbitrary values that aren’t a bare property: h-[calc(100dvh-var(--header-height))].

Section padding

Sections expose padding as ranges in rem, set separately for mobile, tablet and desktop, then piped through custom properties:

class="pt-(--padding-top) md:pt-(--padding-top-tablet) lg:pt-(--padding-top-desktop)"
style="
  --padding-top: {{ s.padding_top_mobile }}rem;
  --padding-top-tablet: {{ s.padding_top_tablet }}rem;
  --padding-top-desktop: {{ s.padding_top }}rem;
"

Note the naming: the desktop setting is padding_top, not padding_top_desktop.