[v4] Loss of Granular Configuration in TailwindCSS v4 - Cannot Restrict Colors to Specific Utilities?

[tsalvetat]

Hello Tailwind team,

I am currently working on a design system built with Tailwind CSS, where we define styles in a granular way for various utilities such as text colors, background colors, border colors, margins, spacing, etc.

In TailwindCSS v3, we could configure colors and other properties in a fine-grained manner, restricting them to specific utilities. However, in TailwindCSS v4, the configuration system has become more generic, making it impossible (or unclear) how to achieve the same level of control.

Loss of Granular Configuration

Previously, we could define colors specific to certain properties, such as border colors:

theme: {
  borderColor: {
    'neutral': '#ccc',
  }
}

Which allowed usage like this:

<div class="border-neutral"></div>

However, in TailwindCSS v4, the new system moves towards defining colors under @theme like this:

@theme {
  --color-neutral: #ccc;
}

Now, this allows:

<div class="border-neutral"></div>

But it also enables:

<div class="bg-neutral"></div>

Which is not what we want, since we want to restrict certain colors to only borderColor, textColor, or backgroundColor.

Impact on Design Systems

• This results in less intuitive and stricter utility classes than before.
• It can lead to inconsistencies when colors meant for borders are mistakenly used for text or backgrounds.
• The previous flexibility of defining properties per utility (borderColor, textColor, backgroundColor) seems to be lost.

Request for a Solution or Roadmap

• Is there a way to migrate this behavior and maintain granular control over colors and other utilities?
• If not, is there a plan to reintroduce or support this kind of customization in future releases of TailwindCSS?

Thank you for your time and for all your work on TailwindCSS! Any guidance on how to approach this in Tailwind v4 would be greatly appreciated.

[wongjn]

You can still declare colors in a fine-grained manner. For your example, it would be:

@theme {
  --border-color-neutral: #ccc;
}

<div class="border border-neutral">Does something!</div>
<div class="bg-neutral">Does nothing!</div>

[tsalvetat]

Hello @wongjn
Thanks for your quick answer.

This is an amazing configuration feature 👍
So it means the table in this documentation is not exhaustive and there are much more variables we can set.

That's perfect, thanks a lot!