theme text/background colors separately

[numso]

In tailwind 3 you could do something like this to configure text and background colors separately:

  theme: {
    extend: {
      backgroundColor: {
        primary: '#fff'
      },
      textColor: {
        primary: '#000'
      }
    }
  }

Is it possible to do that with the new css configuration? The goal being that the text-primary/bg-primary/border-primary/etc utility classes can be different.

[wongjn]

Yep:

@theme {
  --background-color-primary: #fff;
  --text-color-primary: #000;
}

Also see this exhaustive list of all namespaces available.

[numso]

Exactly what I was looking for. Thank you so much!

[rozsazoltan]

Related:

• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys? #19020