Issue with Tailwind v4 Changing the Order of @layer component

[WebCimes]

What version of Tailwind CSS are you using?

^4.0.1

What build tool (or framework if it abstracts the build tool) are you using?

Laravel 11, Vite 5.4.11

What version of Node.js are you using?

v20.16.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

Windows

Description

In Tailwind v3, styles defined inside @layer component were applied after external library styles, allowing developers to override third-party styles easily. However, in Tailwind v4, the order has changed, and external stylesheets are now loaded after @layer component, which causes them to override custom styles.

Steps to Reproduce

Import an external library's stylesheet inside a TypeScript file:

import "external-library/style.css";

Import Tailwind styles and define custom overrides inside @layer component:

import "./style.css"; // This file includes Tailwind and custom overrides

Inside style.css, define a rule in @layer component:

@layer component {
  .custom-button {
    background-color: red;
  }
}

If external-library/style.css has a .custom-button rule with a different background color, Tailwind v4 now applies the external styles after @layer component, overriding the custom styles.

Expected Behavior

The styles defined inside @layer component should be applied after external stylesheets, as it was in Tailwind v3.

Actual Behavior

External styles are applied after @layer component, causing third-party styles to override custom styles.

Thanks for your help

[philipp-spiess]

Heya! There's nothing special about @layer in Tailwind CSS anymore, we just use the CSS @layer now: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

So without a repro it really depends on _what layer you load your external-library into. If the external library is not in any layer, it will have a higher order than the layered stuff. What you can do very simply is to import your third-party code into a specific lower-level layer, e.g.:

import "external-library/style.css" layer(base);

[WebCimes]

Thanks for your response.

Using import external-library/style.css layer(base); works if I import the file inside my style.css. However, I currently import it via a TypeScript file, and I can't specify a layer there.

The only solution I've found is to create a separate CSS file, like external.css, where I include:

import external-library/style.css layer(base);

Then, I import this file through TypeScript.

Do you think there's a better way to achieve this?

Thanks!

[codagonist]

Hi @WebCimes, you seem to be exactly right here. I just read an article about someone who had the same issue and got a reply stating doing that same thing. So, in my case at least, I replaced

@import '../config/Normalize.module.css';
// with
@import '../config/Normalize.module.css' layer(base);

And now I get those inline tailwindcss classes on top of the normalize styles so to speak. Problem solved (so far..).
Not sure if this is the best solution tho..

[WebCimes]

@codagonist Yes, indeed, this is the simplest solution if you import the script directly in CSS via @import with one entry point for css file. However, in my case, I needed to import this script via TypeScript separately from the main CSS file. So, I had to create another CSS file that includes the external library with the layer base, and then import this CSS file along with my main CSS file in my TypeScript file.

[keyss2014]

Hi, I am working with a UI framework (Actually , It's UniApp which is very popular in China), who has its own UI framework, and it import some stylesheets at very deep lower script in their framework ,so i have no chance to change the system code , and can't change the layer of those style sheets, and now I have to use the unities css wiht !, just like !m-4, but I think this is a normal situation , so what's the right way to use Tailwindcss in this situation?

[wongjn]

You can try unlayering the utilities like:

@layer theme, base, components, utilities;

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

Or apply !important to everything like:

@import "tailwindcss" important;

[keyss2014]

Cool! I love @import "tailwindcss" important;

[kimpixel]

hello

I have this problem with ng-zorro.

I can not import the .less file in tailwind.css.
and the !important for all is not in my liking

[wongjn]

You shouldn't use preprocessors with Tailwind. As for !important, try placing all CSS in one of Tailwind's layers or unlayering the imports as per other comment.