PostCSS 7 Compatibility build

[tochoromero]

Is there a chance we could get a PostCSS 7 Compatibility build?
I would love to try it out, but my Vue 2 application doesn't support Post CSS 8.

Thank you for your awesome work!

[migaber]

same here, i can't get it up with vue 2

[waseemhnyc]

I am also in the same boat!

[tuanfront-end]

Same here, CRA doesn't support PostCSS 8 yet. tailwindcss-jit is amazing. Have any way tailwindcss-jit to work on CRA?

[wagerfield]

Same issue with Storybook FWIW. Super keen to test drive JIT within my Next.js project (works out of the box) but Storybook doesn't support PostCSS 8 yet.

[wagerfield]

To followup from my previous comment, I just Googled "Storybook PostCSS 8 support" and came across this page in their docs for the @storybook/addon-postcss plugin:

https://storybook.js.org/addons/@storybook/addon-postcss

I followed the steps as outlined in the docs and updated my .storybook/main.js file to:

module.exports = {
  stories: ["../src/**/*.stories.@(mdx|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
}

...but alas, it did not work. I get the print out in the build logs that Storybook is using PostCSS 8:

info => Using PostCSS preset with postcss@8.2.8

...but I get the error

ERROR in ./src/styles/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/src??ref--12-2!./src/styles/index.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/matthewwagerfield/Documents/work/oven-bits/messenger/messenger-web-app/src/styles/index.css Unknown word

> 1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../node_modules/css-loader/dist/cjs.js??ref--12-1!../../node_modules/postcss-loader/src/index.js??ref--12-2!./index.css");
  3 |

 @ ./src/styles/index.css 2:26-342 53:4-74:5 56:18-334
 @ ./.storybook/preview.ts
 @ ./.storybook/preview.ts-generated-config-entry.js

...which looks like a Webpack loader issue to me, but I'm not really sure how to resolve. I tried installing the latest version of postcss-loader but still got the same error.

[wagerfield]

For anyone interested in using Tailwind JIT with Storybook, I've created a bare bones error reproduction repo:

https://github.com/wagerfield/storybook-tailwind

...and requested the assistance of @shilman (creator of Storybook) here:

storybookjs/storybook#13971 (reply in thread)

[clarkd]

+1 for this - we use CRA and we see the following error from TW: Error: PostCSS plugin tailwindcss-jit requires PostCSS 8.

[wagerfield]

I don't mean to spam this issue with Storybook related compatibility, but I was finally able to get the JIT compiler working with Storybook using the latest Storybook v6.2 RC packages in conjunction with the @storybook/addon-postcss package.

I have updated the repo that I created and shared above to show how to get this working for anyone who's interested.

@adamwathan I'm not sure if this deserves a place in the official TW docs or not, but for users who wish to use tailwindcss@latest autoprefixer@latest postcss@latest with Storybook, they can use this combination of the next version of Storybook (6.2) which is currently tagged as a RC in combination with the @storybook/addon-postcss package.

One of the core maintainers of Storybook (@shilman) said that v6.2 will likely be published in the next couple of weeks, so you won't need to grab the @next versions of the @storybook packages.

It's a very specific setup targeted just at Storybook, but it means that users with the Next.js or CRA + Storybook stack (which is pretty common) can use the JIT compiler or standard tailwindcss package without having to use the @tailwindcss/postcss7-compat package you created and PostCSS 7.

[adamwathan]

No plans to offer a compatibility build at this time, at least while we're still in early alpha/pre-release mode like this. Once we work out the kinks and get this merged into tailwindcss proper you'll get PostCSS 7 compatibility for free 👍🏻