---
title: CSS variables everywhere
date: 2025-03-08
permalink: daily/2025/03/08/variables
tags:
  - software-development
  - css
  - tailwind-css
cta: ~
snippet: |
  CSS variables are everywhere...
---

Now [CSS supports variables][0] (aka custom properties) and [Tailwind CSS v4 is configured using CSS][1] 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][2].

[0]: {{site.url}}/daily/2025/02/28/preprocessors
[1]: {{site.url}}/daily/2024/07/16/tailwind-css-v4--with-even-more-css
[2]: {{site.url}}/daily/2024/05/26/is-it-time-to-stop-writing-sass