Add daily email for 2025-03-08

CSS variables everywhere

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