Tailwind v4: Applied styles on a base element are overtaking classes defined in an HTML file

[nickjj]

What version of Tailwind CSS are you using?

v4.0.0

What version of Node.js are you using?

v22.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Here's the bug with v4: https://play.tailwindcss.com/j4OJXVvyUb

Notice how the link color is sky instead of gray.

Now change the version to v3.4 and the link will become gray.

Describe your issue

With v3 you could apply a color to a specific element and then choose to override that color as needed.

This is a really useful pattern where you can set a default color or style for something (such as links) and 80% of the time you can use that and then when you want a different style you can go into your HTML template and add the Tailwind classes to adjust it.

[wongjn]

Pop the CSS rule in @layer base so that the utility class can override the rule: https://play.tailwindcss.com/sWNnlWVy9z?file=css

[nickjj]

Thanks, I do see https://tailwindcss.com/docs/adding-custom-styles now.

Maybe this detail could be added to the upgrade guide since it behaved differently in v3?

[misbahansori]

Pop the CSS rule in @layer base so that the utility class can override the rule: https://play.tailwindcss.com/sWNnlWVy9z?file=css

What if the style came from a third-party library? which we don't have control over. I have a similar issue here nuxt/icon#346

[wongjn]

Extract out the utility classes from being in any cascade layer:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

[philipp-spiess]

Hey there! With Tailwind CSS v4 we are starting to use CSS @layer pretty extensively and by default, utilities are put into a utilities layer like @wongjn also explained. You can easily change this behavior (thanks @wongjn for the example) if you don't want that.