Density
Density is swappable per subtree. Tailwind v4's numeric spacing scale is
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.
RTL
RTL is an MVP goal. Fragiola uses **logical properties on the inline axis**:
Text
The primitive every other component points at through `render`. It is what stops a dialog title, a field label and a menu label from each growing their own typography class — seventeen title classes is exactly the duplication this project exists to remove.