Scope colors to specific properties

[dsmikeyorke]

First off, our team is loving the Tailwind v4 release!

One feature request we’d like to see implemented is the ability to scope colors to specific properties like backgrounds, text, and borders, etc. In v3, we were able to achieve this using the following code:

textColor: {
      DEFAULT: 'hsl(var(--text-default))',
      subtle: 'hsl(var(--text-subtle))',
      primary: 'hsl(var(--text-primary))',
}

This allowed us to scope colors specifically to the text property, eliminating confusion and ensuring perfect alignment with our design system. Without scoped colors, we now have to prefix each color with the corresponding property, resulting in class names like text-text-subtle or bg-bg-primary. This also increases the number of options considerably in the suggestions popover in our code editor.

Adding this feature would be a game-changer for our projects and would be greatly appreciated!

If this isn’t something you see in Tailwind’s future, do you have any suggestions for a better approach?

[wongjn]

This is already available in Tailwind:

@theme {
  --text-color-subtle: hsl(var(--text-subtle));
  --text-color-primary: hsl(var(--text-primary));
}

Though the "root" DEFAULT case isn't really supported, so you'd need to define your own utility for text:

@utility text {
  color: hsl(var(--text-default));
}

[dsmikeyorke]

@wongjn amazing! Thanks for the quick response.

[dsbrianwebster]

Nice! Is this documented @wongjn?

[wongjn]

Nope!