Defining addons breaks tailwindcss

tajo / ladle

🥄 Develop, test and document your React story components faster.

https://www.ladle.dev

MIT License

2.63k stars 93 forks source link

Defining addons breaks tailwindcss #586

Open jakubsacha opened 2 weeks ago

jakubsacha commented 2 weeks ago

Describe the bug

When I define anything in addons inside .ladle/config.mjs, tailwind stops working. In the example below, when you comment out addons, tailwind starts working again (Simple Story text turns into red because I added text-red-500 to it.).

Reproduction

https://stackblitz.com/edit/ladle-edyec9?file=.ladle%2Fconfig.mjs

Environment

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

tajo commented 1 week ago

The active width addon wraps the story with an iframe, so it's likely an issue of CSS not being correctly applied inside the iframe.

jakubsacha commented 1 week ago

After reading this https://ladle.dev/docs/width/ I was under the impression that the only thing I do, is I customize widths, because this addon seems to be active by default.