[V4] How to specify variable for specific property only (i.e. bg-*)?

[deebov]

We're currently migrating our project which always used CSS variables mapped back to the tailwind config in JS.

In v3 you're allowed to add values for specific properties like backgroundColor, textColor, borderColor, etc. I couldn't find related information in v4 docs. Perhaps it's already possible with v4 but not yet documented?(!)

Main motivation for having this feature I believe is code readability:

bg-bg-primary, text-text-primary, border-border-primary — without this feature this is what you would end up with. IMO these classes read really weird and unnatural.

Perhaps a similar syntax could be introduced to address this issue:

@theme {
  --background-color-primary: var(--color-gray-100);
  --text-color-primary: var(--color-gray-950);
  --border-color-primary: var(--color-gray-300);
}

Would be awesome if it's possible to achieve this in v4.

[wongjn]

Yep, already exists in v4 but undocumented. Follows exactly your suggested syntax: https://play.tailwindcss.com/OKUULfj9f1

[deebov]

Amazing! Thank for you quick response 🙌