I started working on moving phoenix_storybook to Tailwind 4.0 and I’m struggling

First, it’s important to mention that the Tailwind version used in the Storybook and the version used in the hosting application are not necessarily correlated. You can bundle your app’s CSS with Tailwind 4.0, while the Storybook may generate its assets with Tailwind 3.x

That being said, I’m struggling with Tailwind 4 new layer-based architecture: everything in Tailwind 4.0 is part of a CSS layer. While you can tune the priority of a layer over other layers, unlayered styles will always have higher precedence.

If the hosting application provides a CSS reset/preflight outside of any layer (as in Tailwind 3.x), the reset will overwrite most of the storybook’s styling (since unlayered styles are prioritized over Tailwind 4 layers)

The same concern is related here.

So far, my best idea would be to ask storybook’s users to wrap their styling within a specific @storybook layer

Do you have any idea, someone?

this post is a copy of the following GitHub issue