tailwind 3 doesn't work with storybook/webpack setup

I’m using macOS, Chrome v96, Node.js 16

I created a github repository with this exact issue - https://github.com/sachinmour/tailwind-issue

Basically just do yarn and yarn storybook and you’ll see storybook loaded correctly. change package.json to use tailwind ^3.0.0 and run yarn and yarn storybook again and you’ll see no tailwind is loaded inside storybook.

[ManiruzzamanAkash]

Hi, the above staffs didn’t worked for me. here is the quick solution - in .storybook/preview.js file add this line to compile tailwind generated css files like this -

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

Here tailwindcss/tailwind.css is the tailwind css file. Look, important is I’ve to add !postcss-loader! to compile tailwind generated css.

There are more solutions answered here - https://stackoverflow.com/a/70805809/5543577

[sachinmour]

@nvsd @LinnJS @paulgendek so, I figured out what the problem was, I don’t think it was because of what you guys said. The problem is in v3 of tailwindcss has JIT enabled by default and that means it’ll only add css that you use in your components, and in v2 if you didn’t define mode and left the purge config as an empty array, it would add all of tailwindcss, but now you MUST define content property with all the places you’re using tailwindcss and as soon as I updated content to include my src folder, everything started working as usual. I’ve updated my original repo with working code https://github.com/sachinmour/tailwind-issue

If you guys don’t agree, let me know, otherwise, I’ll close this issue in 2 days.