Is there a way to define colors differently for different utilities?

[SamBallantyne]

Today (on tailwind v3) we define colors in a utility specific way, by overriding the themes entirely in tailwind.config.js. Colors like main or brand or whatever mean different things for different utilities (text-, border-, bg-)

Minimal example:

:root {
  --color-content-main: rgb(51, 67, 82);
  --color-border-main: rgb(237, 241, 245);
}

.dark {
  --color-content-main: rgb(210, 213, 223);
}

Then in the config file

textColor: (theme) => ({
  main: 'rgb(var(--color-content-main) / <alpha-value>)',
  // ... 
})
borderColor: (theme) => ({
  main: 'rgb(var(--color-border-main) / <alpha-value>)',
  // ... 
})

This helps us tune our colors, and we prefer this way of expressing dark mode.

Is a tailwind.config.js file still the blessed way to do this, or is there a way in pure css?

[wongjn]

There is a way in CSS:

@theme {
  --text-color-main: rgb(51, 67, 82); /* text-main */
  --border-color-main: rgb(237, 241, 245); /* border-main */
}

[SamBallantyne]

Oh my god, terrific! Is this in the documentation? I'm sorry for missing it!

[wongjn]

No, it isn't in the documentation.