[Feature Proposal] Provide a method to increase CSS specificity to ease development of component systems

[AndyOGo]

I would like to propose an alternative method to increase CSS specificity to the ! important modifier.

I suggest to support an adjoining classes modifier like trump: or bump:.

It would render the utility like:

<div class="red bump:blue">

Generated CSS:

.blue,
.bump.blue { // <- this adjoining class wins
  color: blue;
}

red {
  color: red;
}

A simple live example.

---

Background:

Using tailwind for component or design systems often has the need to override tailwind classes of a component, e.g. colors or dimensions.

I found these posts explain the problem at hand very well.

• https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3
• https://sancho.dev/blog/tailwind-and-design-systems

Related issues:

• Class doesn't overwrite previous class #9980
• .border trumps .border-[size] #1013
• Consider moving accessibility to end of core plugins list for highest specificity #1432
• [Feature proposal] Background-image reset #436

[olets]

This is a good use case for addVariant(). You can add your own bump: variant. https://tailwindcss.com/docs/plugins#static-variants

Fwiw the solution I'm used to seeing for the specific problem you described is to add a prop for "color"/"intent"/etc, and then have logic to say something like "color with a fallback of red" or "if intent is primary, red. if intent is secondary, blue". In some cases, that can have added self-documentation benefits.

[AndyOGo]

I published tailwindcss-trump.

The static variant is super easy and simply repeats the selector.

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.
https://www.w3.org/TR/selectors-3/#specificity

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('trump', '&&')
    })
  ]
}

Play with it here
https://play.tailwindcss.com/v5ZpuKy2hH

[remus-selea]

Could this be migrated to v4?

[AndyOGo]

@remus-selea It still works with tailwindcss 4 @plugin directive for legacy JS plugins
https://tailwindcss.com/docs/functions-and-directives#plugin-directive

In your config:

@plugin "tailwindcss-trump";

Example
https://play.tailwindcss.com/jwYgxSVsZI?file=css

A part from that peer dependencies should be updated
https://github.com/AndyOGo/tailwindcss-trump/blob/ed87fb54c75db2876817358705877abb1850b63e/package.json#L57