Density
Density is swappable per subtree: Tailwind v4's spacing scale is `calc()` over `--spacing`, so changing it rescales every spacing utility.
Density is swappable per subtree. Tailwind v4's numeric spacing scale is
calc() over a custom property, so changing --spacing changes every
spacing utility in the subtree.
[data-density="compact"] { --spacing: 0.2rem; }
[data-density="spacious"] { --spacing: 0.3rem; }The default is 0.25rem (Tailwind's default). Apply data-density to any
element and its descendants inherit the tighter or looser spacing.
Switching
There is no built-in density control. To try a density, set data-density on
the <html> element — either from your browser devtools for a quick look, or
in your own app's root layout:
<html data-density="compact">Because --spacing is inherited, every spacing utility in the subtree
follows. A consumer app that wants a persistent density switch can wire its
own control that sets this attribute and persists the choice, the same way
next-themes does for data-theme.