Tailwind CSS v4 incompatibility caused by native cascade layers

[timkley]

Tailwind CSS v4 is built on native cascade layers. This unfortunately breaks some Flux components because the injected stylesheets overwrite the utilities because unlayered declarations have a higher priority than layered declarations.

Underlying web components like ui-radio inject CSS like display: inline-block which now isn't overwritten anymore by the .flex class, resulting in a segmented radio group looking like this:

Taking a look in the generated CSS reveals the problem with the new cascade, the injected styles take precedence over the utilities as they have no layer definition.

Possible Solution

To solve this issue the injected styles need a layer declaration, a fix could look like this.

flux-pro/js/utils.js#6

let styles = [...]

styles = `@layer base { ${styles} }`;

I've verified this solution in Chrome by overwriting the generated script with Chrome DevTools.

Things to consider

• Is base the most suiting layer?
• will this have unintended consequences in other use-cases? Although everything worked in my (very basic) test: I only use the built-in components and didn't overwrite anything. From my understanding though I'd say this should still work as intendend.

[calebporzio]

Ooof this seems like it would break many other application stylesheets. Let's see how this shakes out as Tailwind 4 releases approaches (we may not even have to address this on our end)

---

Going to close this and leave it as a sub issue on #811 as a psuedo "todo"