You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Theming docs don't explain that @theme inline is required for tokens to work
#12254
The Theming page implies the token-to-utility mapping is automatic:
"Tailwind maps these tokens into utilities like bg-background..."
In "Token Convention", defining only --primary and --primary-foreground is said to make bg-primary resolve to var(--primary).
In Tailwind v4 that isn't true on its own. Defining --background in :root does nothing until the token is registered:
@theme inline {
--color-background:var(--background); // now you can use utility bg-background
}
The page only shows this block in "Adding New Tokens" and the default scaffold, and never says it's required (or why it must be inline).
Suggested fix: Right after the "Tailwind maps these tokens into utilities..." sentence, add a note: "Defining a CSS variable doesn't create a utility. Register it in @theme inline as --color-* to make classes like bg-background available."
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Page: https://ui.shadcn.com/docs/theming
The Theming page implies the token-to-utility mapping is automatic:
bg-background..."--primaryand--primary-foregroundis said to makebg-primaryresolve tovar(--primary).In Tailwind v4 that isn't true on its own. Defining
--backgroundin:rootdoes nothing until the token is registered:The page only shows this block in "Adding New Tokens" and the default scaffold, and never says it's required (or why it must be
inline).Suggested fix: Right after the "Tailwind maps these tokens into utilities..." sentence, add a note: "Defining a CSS variable doesn't create a utility. Register it in
@theme inlineas--color-*to make classes likebg-backgroundavailable."All reactions