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!