[V4] Themeable utilities use properties

[tryoxiss]

For V4, the blog post mentions that it exposes the custom properties used for config as CSS variables. Does it already or could it use the custom properties that are defined, since they are output.

For example:

@theme {
    --color-gray-50: #f8fafc;
}

// could output something along the lines of

:root {
  --color-gray-50: #f8fafc;
}

.text-gray-50 { color: var(--color-gray-50); }

// rather than using the value directly

.text-gray-50 { color: #f8fafc; }

This would make arbitrary theming near trivial, as the properties could just be overloaded by another stylesheet.

// output.css
:root {
  --color-gray-50: #f8fafc;
}

.text-gray-50 { color: var(--color-gray-50); }

// my-theme.css
:root {
  --color-gray-50: #f8f8f8;
}

// now `--color-gray-50` evaluates to `f8f8f8`. This can be combined with media queries to easily accomodate for all combinations of `prefers-color-scheme: dark | light`, and `prefers-contrast: less | no-preference | more`, or even just custom color schemes. 

I don't see this being super important for most websites, but it would be hugely useful for web apps. And its a very small change (if its not already how it works, I dont know how to check 😖)

[adamwathan]

Hey! Yeah this is how things already work in v4 by default, take a look at the "Generated CSS" pane in this demo:

https://play.tailwindcss.com/M7TxWXpLnq

You can also opt-out of this using the reference option to avoid generating the CSS variables, and the inline option to tell Tailwind not to try to use those variables in the corresponding utilities:

@theme inline reference {
  --color-red-50: ...;
  /* ... */
}

[tryoxiss]

Thank you for your response, and I apoligse for my admittedly dumb question. Thats awesome though, I love seeing tailwind going all-in on CSS config and the easily themeable utilities solve every remaining hesitation I had about tailwind! Thank you again for all your amazing work.