Tailwind classes not overriding regular CSS classes

[tomerzcod7]

After upgrading to v4, CSS classes applied to elements imported from external libraries that already has some CSS classes on them stopped working.

I took a closer look and I think this is related to https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities, Tailwind not "hijacking" the the @layer at-rule anymore.

For example, this is what happens when I try to style ReactFlow package Handle component:

v3:

and this is the exact same code with v4:

You can see that in v4, the classes are applied at the utilities cascade layer, making them less specific then the built in unlayered classes (https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#description)

I'm not sure if it's a bug or desired, but it seems to me like this would break a lot of code relying on classes supplied from outside having precedent over internal classes.

The issues is solved if I mark all classes that are conflicting with important:

Is this the recommended way to solve it? Am I missing something here?

Thanks in advance

[wongjn]

This is an unfortunate side effect with v4's approach with CSS native cascade layers.

If possible, you could @import the React Flow CSS in your Tailwind source CSS file to assign it to a cascade layer lower than @utilities like:

@import "tailwindcss";
@import "@xyflow/react/dist/style.css" layer(components);

Otherwise, you could pop the Tailwind utilities outside of any layer:

@layer theme, base, components, utilities;

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

And lastly, you could use the solution you've already found with using !important.

[tomerzcod7]

Assigning the React Flow CSS to the components layer works perfectly, thank you!
Would that be the recommended solution for external CSS stylesheets in V4? (considering you need to override some classes)

[wongjn]

Yes, I think that is the recommended solution for third-party CSS stylesheets in v4.