Following phx.gen.storybook Instructions Breaks All CSS on Pages

[probably-not]

After initializing an empty Phoenix project, I added phoenix_storybook so that I can showcase the components in our app.

I ran phx.gen.storybook and followed the exact instructions given, and when simply opening the default homepage of the Phoenix app, I see that all of the CSS is broken on the page...

The root cause seems to be the instruction in phx.gen.storybook telling me to add important: ".demo-web", to my module.exports in my tailwind.config.js file. Removing that configuration fixes the CSS issues on the page, and doesn't seem to affect my storybook components at all.

I've created a recreation of the exact steps I took here: https://github.com/probably-not/storybook-css-break-issue

[cblavier]

thanks, I'll have a look on your repo

[cblavier]

the good way to solve this issue is to add the storybook-css-break-issue-web CSS class to your body tag in root.html.heex

I guess I need to add this instruction to the generator