27 lines
1.4 KiB
Markdown
27 lines
1.4 KiB
Markdown
|
---
|
||
|
|
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
|