search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.85k stars 4.2k forks source link

[Bug]: Tailwind breaks entirely in Storybook with webpack5 #4398

Closed ljosberinn closed 3 years ago

ljosberinn commented 3 years ago

What version of Tailwind CSS are you using?

2.1.2

What build tool (or framework if it abstracts the build tool) are you using?

Next,js 10.2.1

What version of Node.js are you using?

16

What browser are you using?

not applicable

What operating system are you using?

windows

Reproduction repository

https://github.com/ljosberinn/sb-wp5-tw

Describe your issue

Similar to #3971, tailwind with and without JIT breaks on storybook with webpack 5 enabled. I'm not sure whether this is an issue in storybook instead so please let me know whether to file it over there :)

I initially just followed their documentation and the countless copy pasted tutorials out there for storybook + tailwind but none of them apply both jit and webpack5. Also alternatively built upon this provided PR from #3971, to no avail.

The repro is a barebones create-next-app + sb init --builder webpack5 repo with the same minimal changes of className="p-12 text-primary" in stories/Button.js.

bradlc commented 3 years ago

Hey @ljosberinn. I have opened a pull request on your repo. I am not massively familiar with Storybook but from what I can tell it used to support PostCSS implicitly but now you need @storybook/addon-postcss. Hope that helps!