Support bg,text,border,outline exclusive colors

[gland2015]

Like this:
colors: { bg: { primary: { 50: "white" } }, text: { primary: { 50: "black" } } }
output:
bg-primary-50: white
text-primary-50: black

This is more conducive to the abstraction and use of colors.
Now it can be achieved by setting a color callback function and determining the type based on the parameter opacityVariable.
But I think it might be better to modify it to exclusive, with different keys available.

[wongjn]

You can do this already, like:

module.exports = {
  theme: {
    extend: {
      backgroundColor: {
        primary: {
          '50': 'black',
        },
      },
      textColor: {
        primary: {
          '50': 'white',

[gland2015]

Oh, awkward, I didn't see the configuration clearly. Thank you for your answer.

[thefrana]

@wongjn how can you achieve the same result in v4?

[wongjn]

You can do:

@import "tailwindcss";

@theme {
  --text-color-primary-50: black;
  --background-color-primary-50: white;
}

https://play.tailwindcss.com/JTuavB1R0Q?file=css

[thefrana]

Thats it! Thanks!