1.4 KiB
| title | date | permalink | tags | cta | snippet | |||
|---|---|---|---|---|---|---|---|---|
| CSS variables everywhere | 2025-03-08 | daily/2025/03/08/variables |
|
~ | CSS variables are 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.