TailwindCSS 2 + Storybook 6 with PostCSS 8

[dfee]

This was sort of painful, so to make this experience easier for others, I've added a gist that shows everyone how it's done:

As stated in the title:

• Tailwind 2
• Storybook 6
• PostCSS 8

I'm using this with NextJS, and while that's not strictly relevant, I hope that keyword improves others' search results. 😄

Here are the files: https://gist.github.com/dfee/d2d3b4a70f80e5050cf452abfca39f87

[Avery711]

Some of the tooling within Storybook relies on PostCSS v7, and Tailwind 2.0 needs PostCSS v8 to work.

Because this is currently a recurring problem (a lot of tooling in the front end ecosystem still relies on PostCSS 8), we've created a compat version of Tailwind CSS that will work with PostCSS 8:

GarageBand

[dfee]

Let it be noted that the comment I'm replying to is literally a copy / paste from a contributor 4 months ago. It neither brings anything new to the discussion, nor refutes the premise of the discussion.

The contributor's comment doesn't reflect Storybook supporting PostCSS 8 – which it now does via the official package@storybook/addon-postcss.

Additionally, even if sticking w/ PostCSS 7 the story for using plugins like @tailwindcss/forms is not clear.

[christopherslee]

I was struggling with this big time, thank you!