Dealing with cascade layers

[o-t-w]

Cascade layers are available since Chrome 99 and Firefox 97. As of March 8th it will be in Safari stable.

Cascade layers will be useful for Tailwind users because it will make it less necessary for users to set important: true, in their config as layers provide a nicer way to make sure utility classes always win.

However, for people that want the override styles provided by Tailwind, there will be a problem.

A lot of people won't rely 100% on the Tailwind way of doing things, and will instead also want to write some of their own CSS. If I want to write any of my only styles inside a layer, these will be overridden by the Tailwind reset.
e.g.

@layer base {
.btn {
  background-color: rgb(200,200,200);
}
}

will be overridden by button {background-color: transparent; } from the Tailwind stylesheet. (Styles outside a layer will always win out over styles defined in a layer, regardless of specificity or source order.)

I think layers are a useful addition to CSS that will quickly gain widespread adoption. It would be awesome if Tailwind had a nice way of dealing with layers as soon as they gain cross-browser support.

[adamwathan]

Hey! The example you gave will already work, Tailwind reserves the base, components, and utilities layers and will merge those in to the right place automatically:

https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

Your .btn class will not be overridden by button {background-color: transparent; }, here's a demo:

https://play.tailwindcss.com/vsxrhjhNcs?file=css

[o-t-w]

By polyfilling the feature you end up with: "Don't use @layer in component styles... You lose the ability to control the precedence of your styles, but unfortunately that’s totally out of our control because of how these tools work."

[o-t-w]

I don't think your response really addressed the issue. Your example is all Tailwind code. What if I had defined, outside of my Tailwind CSS, this CSS:

@layer overrides {
     .list {
  list-style-type: square;
}
}

This would be overridden by this Preflight code:

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

I know I could simply opt not to use Preflight and still use the utility classes without issue, but ideally Tailwind should have a config option to support native @layer.
Because CSS that is not defined in a layer overrides all CSS defined in a layer, it basically makes it impossible to use native CSS @layer in conjunction with Preflight.
Tailwind needs a way to interact with non-Tailwind CSS code that is making use of the native browser @layer (rather than the Tailwind pollyfill version of @layer).
And I think the fact that Tailwind has its own version of @layer that is different from the browser CSS technology is just going to confuse everyone.

[o-t-w]

Some useful links:

• https://css-tricks.com/css-cascade-layers/#aa-using-design-systems-and-component-libraries
• https://twitter.com/bramus/status/1500223729309257737?s=21

[o-t-w]

Now that CSS @layer is supported in all browsers, it would be great to be able to define the Preflight into a separate layer from the utility classes. Some sort of option in the config file to specify named layers for the utility classes and preflight would be much appreciated

[adamwathan]

Can you give me a real example of code that won’t work properly? I’m struggling to think of a situation that presents a real problem because you have complete control over where Preflight is inserted, and you can add any custom layers you want either before or after it. The whole reason Tailwind generates its code into three distinct layers is to give you this control.

[nemzes]

I don't think the example from @wongjn fixes this issue cleanly. The styles provided by @tailwind utilities leak outside the CSS @layer in the generated CSS in their example.

[o-t-w]

I documented the approach I went for on CSS Tricks:
https://css-tricks.com/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project/

[nemzes]

I just saw your article @o-t-w; great write-up! I think there is a problem still, if you see the "generated CSS" in @wongjn's play there are some rules that leak at the end of the @layer wrappers. They seem to be pseudo-classes and media queries, which should remain within their @layers.

[o-t-w]

@nemzes those are styles that come from @tailwind variants. If you explicitly include @tailwind variants; hopefully it should be fine?

[nemzes]

Indeed. Adding an extra @layer seems to fix it, although I was surprised that those styles just popped up "magically" (I see the logic in inserting variants at the end, but it makes this solution feel somewhat brittle given the assumptions that Tailwind makes don't necessarily aling with @layer):

@layer tailwind.variants {
  @tailwind variants;
}

[nemzes]

Even if it's possible to deal with the override problem (see @wongjn's solution above), it's not clear to me how I can use Tailwind's @layer feature together with CSS Cascade Layers' @layer — since they name-clash.

Won't the Tailwind processor simply assume that @layer declarations refer to Tailwind's own layer feature? Should Tailwind's @layer be renamed @tailwind-layer instead?

[o-t-w]

I’ve not noticed any issues, but agree it feels slightly hazardous…

[adamwathan]

Tailwind reserves the “base”, “components”, and “utilities” layer names but everything else is untouched and just passed through to your final CSS. So if you are hellbent on using those layer names in your custom CSS you’re out of luck but feels like a very superficial problem to me that’s not worth getting too annoyed about. We actually had @layer before it existed in CSS, otherwise probably would have used a different name but don’t want to mess with backwards compatibility.

[nemzes]

It seems like the solution mentioned above will trigger the Nested @tailwind rules were detected, but are not supported warning, courtesy of a parent node check.

[trey]

I'm still getting that nesting error, but things seem to be working as expected. Thanks for that article, @o-t-w!

[GuusPlx]

I think it's best if Tailwind doesn't polyfill the @layer feature anymore, or provides a differnt approach to have better compatability with the default @layer CSS behaviour.

@adamwathan here is a real example of code that won't work:

Currently it is not possible to dynamically import multiple css files (for code splitting for example) and use the layer functionality to create the right CSS layering.
Tailwind layer polyfill works great for one CSS bundle. But when you want multiple bundles that are dynamically imported on different routes it won't work.

<head>
  <!--  (includes base styles and tailwind) -->
  <link rel="stylesheet" href="main.css"> 
  
  <!--  these files can't use cascading layer functionality to get onto the right layer -->
  <link rel="stylesheet" href="dashboard-bundle.css"> <!--  (optionally rendered based on route) -->
  <link rel="stylesheet" href="other-large-module.css"> <!--  (optionally rendered based on route) -->
</head>

I like the polyfill TailwindCSS currently uses through PostCSS but it should also work together with the default @layer CSS functionality that is currently supported in all browsers

https://css-tricks.com/css-cascade-layers/#aa-using-design-systems-and-component-libraries
The approach of this article doesn't seem to work for me and causes this error:
"Nested @tailwind rules were detected, but are not supported."

What do you think of this situation? It is mostly caused because in our projects we use CSS together with utility classes of TailwindCSS so we do depend on large CSS modules for specific pages.
Is it a valid case or can it be solved any other way?
Thanks in advance!

[adamwathan]

Yep planning to change this for v4, but can’t make any breaking changes until then. The next version of Tailwind will support wrapping our “layers” in real cascade layers like you’ve mentioned though — try our insiders build if you’d like to test.

[GuusPlx]

Awesome Adam! Tailwind just keeps getting better, thanks alot.

[DaniGuardiola]

@adamwathan could you link to any docs or examples of how to do that in the insiders build? Would love to beta-test :)

[TKDev7]

actually where can I find this insiders build?