v4.1.0 handling different layer orders in conditional rules is unsupported

[chenjmdgjl]

"vite": "^6.2.4"
"@tailwindcss/vite": "^4.1.0",
"tailwindcss": "^4.1.0",

14:58:18 [WARN] [vite] [vite:css][postcss] handling different layer orders in conditional rules is unsupported by this plugin and will cause style differences between browser versions.
1 | /*! tailwindcss v4.1.0 | MIT License | https://tailwindcss.com/ */
2 | @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3 | @layer base {
| ^^^^^^^^^^^^^
4 | *, ::before, ::after, ::backdrop {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | --tw-space-y-reverse: 0;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 | --tw-border-style: solid;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 | --tw-font-weight: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 | --tw-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | --tw-shadow-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | --tw-shadow-alpha: 100%;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | --tw-inset-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | --tw-inset-shadow-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | --tw-inset-shadow-alpha: 100%;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 | --tw-ring-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 | --tw-ring-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | --tw-inset-ring-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17 | --tw-inset-ring-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 | --tw-ring-inset: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19 | --tw-ring-offset-width: 0px;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 | --tw-ring-offset-color: #fff;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 | --tw-ring-offset-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 | --tw-outline-style: solid;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
23 | }
| ^^^^^
24 | }
| ^^^

[wongjn]

Seems like this might be a dupe of #17494 (but with the @csstools/postcss-cascade-layers package) that should be fixed by #17493.

[RobinMalfait]

Hey!

This should be solved by the latest v4.1.1 release. Can you try and update and verify that this solves your issue?

[chenjmdgjl]

Hey!

This should be solved by the latest v4.1.1 release. Can you try and update and verify that this solves your issue?

4.1.1 problem still exists!

system: mac os
node: v22.14.0

"@tailwindcss/vite": "^4.1.1",
"tailwindcss": "^4.1.1",
"vite": "^6.2.4"
"@csstools/postcss-cascade-layers": "^5.0.1",

18:08:52 [WARN] [vite] [vite:css][postcss] handling different layer orders in conditional rules is unsupported by this plugin and will cause style differences between browser versions.
1 | /*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
2 | @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3 | @layer base {
| ^^^^^^^^^^^^^
4 | *, ::before, ::after, ::backdrop {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | --tw-space-y-reverse: 0;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 | --tw-border-style: solid;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 | --tw-font-weight: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 | --tw-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | --tw-shadow-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | --tw-shadow-alpha: 100%;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | --tw-inset-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | --tw-inset-shadow-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | --tw-inset-shadow-alpha: 100%;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 | --tw-ring-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 | --tw-ring-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | --tw-inset-ring-color: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17 | --tw-inset-ring-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 | --tw-ring-inset: initial;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19 | --tw-ring-offset-width: 0px;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 | --tw-ring-offset-color: #fff;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 | --tw-ring-offset-shadow: 0 0 #0000;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 | --tw-outline-style: solid;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
23 | }
| ^^^^^
24 | }
| ^^^

[philipp-spiess]

Can you send us a reproduction of that issue that we can run locally?

[philipp-spiess]

Also it seems that this error comes from csstools/postcss-cascade-layers. Is there any particular reason you're using this polyfill? The browsers that this polyfill is needed would be broken with Tailwind CSS v4 regardless.

[chenjmdgjl]

Also it seems that this error comes from csstools/postcss-cascade-layers. Is there any particular reason you're using this polyfill?

The purpose of using the @csstools/postcss-cascade-layers plugin is to ensure compatibility with lower version browsers for "@layer"
I have also inquired with PostCSS, and they said that this issue should be raised to Tailwindcss csstools/postcss-plugins#1589

[philipp-spiess]

@chenjmdgjl Yeah but which browsers are you targeting and are you sure these really work with the Tailwind CSS v4 code we generate? We rely on other features from newer browsers as well like oklab(…) colors which are a much more recent addition than cascade layers:

[philipp-spiess]

I converted this to a discussion because I don't think this is something that we can fix. Tailwind CSS v4 requires cascade layers and if you're using a polyfill to target older browsers, we can't do much about this warning here since we can't remove the @supports query reasonably from this @layer rule. You can always silence the warning if you want to.

[chenjmdgjl]

The new version no longer has this issue, thank you 🙏