Expand V4 @theme color support

[Laurensvdmaas]

Hi,

In the V3 config we could define

backgroundColor: {
  accent: red;
}
borderColor: {
  accent: bue;
}

With the new @theme directive we can only set the color accent once:

@theme {
  --color-accent: red;
}

We currently support multiple themes and sometimes border/background are the same and sometimes they are slightly different so in V4 we'd have to define our colors like:

@theme {
  --color-background-accent: red;
  --color-border-accent: blue;
}

<div class="bg-background-accent border-border-accent">

It would be nice to have more fine grained support for colors.

[wongjn]

You can do:

@theme {
  --background-color-accent: red;
  --border-color-accent: blue;
}

<div class="background-accent border-accent">

https://play.tailwindcss.com/8ZlTCX1oMQ

[Laurensvdmaas]

Couldn't find this in the docs but it works, thanks!