CSS variables everywhere
Now CSS supports variables (aka custom properties) and Tailwind CSS v4 is configured using CSS instead of JavaScript, I've been making heavy use of CSS variables in my front-end code.
I still use Tailwind to do the heavy lifting, but I can use CSS variables to extract themeable classes with variables like --color-primary that can change value based on a data attribute or by something else.
These variables can still use Tailwind's core variables by doing --color-primary: var(--color-red-500), rather than having to recreate all its colors, spacing or whatever variables I need to use.
Tailwind has a arbitrary syntax to easily use CSS variables - e.g. bg-(--color-primary) - and you can define one-off variables with [--box-spacing:30px] or [--box-spacing:--spacing(3)] and using the standard arbitrary class syntax.
CSS variables aren't specific to Tailwind CSS, so if I wasn't using Tailwind in a codebase, I'd use the new native CSS features instead of a preprocessor like Sass.
- Oliver
