TailwindCSS v4 Compatibility

[ckvv]

TailwindCSS v4 includes all styles within @layer, which is terrible for browsers that don't support @layer as it will cause all styles to fail. Is there any way to disable this option?

[skttl]

It's a baseline feature available in all browsers that v3 also supported. So probably no big deal?
https://caniuse.com/css-cascade-layers

[ckvv]

Even with the latest versions of browsers on mobile devices, there are still quite a few browsers that are not compatible with @layer, such as Baidu browsers, which can affect all tailwindcss styles.

[remorses]

5% of users left behind is too much in my opinion

[wongjn]

You can try doing:

-@import "tailwindcss";
+@import "tailwindcss/theme.css";
+@import "tailwindcss/preflight.css";
+@import "tailwindcss/utilities.css";

Though do bear in mind Tailwind expects CSS cascade layers to be used, so the above could break things.

[crper]

I hope the official can support two writing methods. Currently, in my usage scenarios, there are cases where the Chrome version is lower than 100. The writing methods of scopes like @layer used in the official built - in cannot be downgraded. Even if I modify LightningCSS, it doesn't make any sense. At present, the method of directly referencing from the source code in the issue can be used temporarily, but it is not the officially recommended writing method. I spent a great deal of effort migrating from v3 to v4, and now I have to worry that anomalies may suddenly be introduced during subsequent upgrades. It's really frustrating.

[Nafsdev0007]

after the update of tailwind dont know why i cant extend my fonts and colors in my project then how to do it ? plaz help me😭😭

[crper]

The official has provided two methods. The first one is still to integrate tailwind.config.js. As long as Tailwind can read it, refer to this link:
https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

The second one is the new writing method recommended by the official. Put it in @theme and @layer, and combine it with custom CSS variables (the ones defined in tailwind.config.js will be converted into custom variables by themselves).