What a theme variable does
Theme variables are CSS variables declared with @theme. Unlike ordinary CSS variables, they also tell Tailwind which utility classes and variants should exist for those tokens.
Token namespaces
Tailwind uses namespaces for colors, fonts, breakpoints, spacing, shadows and other design concepts. A variable such as --color-brand-500 creates utilities such as bg-brand-500 and text-brand-500.
Theme versus ordinary CSS variables
Use @theme when the value should participate in Tailwind's generated utility API. Use normal :root variables when you need a CSS variable that does not need corresponding Tailwind utilities.
ADVERTISEMENT