diff --git a/source/_daily_emails/2025-03-08.md b/source/_daily_emails/2025-03-08.md new file mode 100644 index 00000000..064a180d --- /dev/null +++ b/source/_daily_emails/2025-03-08.md @@ -0,0 +1,26 @@ +--- +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