(Tailwind v4) Different Color set for element like text color, background color etc

[keshavkatwe]

How can we achieve the same behaviour in tailwind v4, Using only css file

module.exports = {
  theme: {
    extend: {
      textColors: {
        'primary': red,
      },
     backgroundColor: {
        'primary': blue,
     }
    }
  }
}

I am not able to achieve the same in tailwind v4, I have a design system with predined colors for text, background, border.
Can someone help me.?

[wongjn]

You can use --text-color and --background-color namespaces respectively:

@theme {
  --text-color-primary: red;
  --background-color-primary: blue;
}

[wongjn]

No, it isn't documented.

[JulienLecoq]

That's unfortunate, it's a great way to solve the following problem:

You create a destructive color, but the bg-destructive color is too intense so you decrease the intensity of the color but then you end up having a text-destructive color not intense enough so the contrast ratio isn't good anymore.

I've set up a --text-color-destructive and --background-color-destructive slighlty different so I don't have this problem anymore :)

[rozsazoltan]

Mhh interesting, I've been searching for something like this for a long time. Is it documented somewhere?

tailwindlabs/tailwindcss.com#2247

[wongjn]

And tailwindlabs/tailwindcss.com#2178

[JulienLecoq]

Oh good to know, thanks guys!