Tailwind 3 JIT mode does not seem to work with Storybook and @storybook/addon-postcss

[wheelmaker24]

Hi,

we've just updated to Tailwind 3 and are using it in our Storybook configuration with PostCSS.

Everything seems to work fine, however the CSS doesn't update "just-in-time" when we add new classes to our markup. If we want the watcher update the CSS, we have to manually save our CSS file in order for the watcher to rebuild the CSS.

Any ideas why this happens? Storybook uses Webpack 4 under the hood.

Extract from package.json:

"tailwindcss": "^3.0.5",
"postcss": "^8.3.6",
"@storybook/react": "^6.4.9",
"@storybook/addon-postcss": "^2.0.0",

Storybook's main.js (configures PostCSS options):

const autoprefixer = require('autoprefixer');
const postcssFocusVisible = require('postcss-focus-visible');
const tailwindcss = require('tailwindcss');

module.exports = {
	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
	addons: [
		{ name: '@storybook/addon-essentials', options: { actions: false } },
		'@storybook/addon-a11y',
		{
			name: '@storybook/addon-postcss',
			options: {
				postcssLoaderOptions: {
					implementation: require('postcss'),
					postcssOptions: {
						plugins: [tailwindcss(), autoprefixer(), postcssFocusVisible()],
					},
				},
			},
		},
	],
};

Thanks!
Nik

[ealmiladi]

Bump.

[Ponjimon]

I was having the same issue until I noticed that in the browser console it said:

Ignored an update to unaccepted module

The solution was to add this to the preview.js file (where you import the Tailwind CSS):

if (module.hot) {
  module.hot.accept();
}

Although I'm not sure if this is the optimal solution, let me know if you find a better one!

[ealmiladi]

Unfortunately, that didn't seem to work for me.

[paulwongx]

Also didn't work for me

[silouanwright]

Thank you, that worked for me!

[niyowski]

Worked for me in an Nx setup, thanks.

[paulwongx]

bump as well.

[paulwongx]

Hey I finally got it to work. Please see my SO link below and let me know if it works for you!

https://stackoverflow.com/questions/71329335/how-to-setup-storybook-with-tailwindcss-reactjs-and-typescript

[szuelch]

Hm, unfortunately that still doesn't work for me. tailwind doesn't recognize new classes added during runtime. Only when I restart the dev server or save the tailwind.css file manually the new classes are rendered in the generated tailwind.css file.
The normal (static) build however works completely fine and all classes that tailwind finds in the templates are generated in the tailwind css file.

[lirbank]

I believe I have found a working configuration, with the help of this comment storybookjs/storybook#13538 (comment). The following will enable so Tailwind generate CSS as new tailwind classes are added to the markup in dev mode (hot reload).

In summary, I don't think @storybook/addon-postcss works with Tailwind JIT and Storybook hot reload, and the workaround is to use the postcss-loader webpack loader.

Install these deps:

@storybook/builder-webpack5
@storybook/manager-webpack5
postcss-loader
webpack (must be version 5)

// .storybook/main.js
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    // {
    //   name: "@storybook/addon-postcss",
    //   options: {
    //     postcssLoaderOptions: {
    //       implementation: require("postcss"),
    //     },
    //   },
    // },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

// .storybook/preview.js
import "../styles/globals.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

[sjunepark]

Thanks

[tszhong0411]

Thanks! I struggled with this for 3 hours and finally found a solution!

[harryjamesuk]

This seems to only work for me on initial load, and new Tailwind classes aren't generated in hot reload.

[harryjamesuk]

I think I may have misunderstood slightly! This config works for me in generating Tailwind classes on a hot reload if I change the code in my files, but I was trying to make it so if I updated className as a control within Tailwind (for example, adding a class like bg-red-500), the change would be reflected.

I believe it currently wouldn't be possible to do this, because Tailwind generates the CSS based on the files and I assume therefore in order to achieve what I was looking for, it would require some middleware to intercept the web requests and get Tailwind to send down the appropriate styles.

[Shaderpixel]

@harryjamesuk Not sure if there's a more recent and better solution to getting new styles compiled when updating class name props inside of Preview. For TW v3.3.3, the solution I tried that works is by safe listing all of Tailwind's classes when I have a environment flag turned on. This does solve the issue, but as you guessed, is not ideal as it increases the build time for Tailwind and the Storybook's Preview. Drew inspiration from this thread.

[ben-xD]

If anyone is having issues (like I was)... Following the official guide works out of the box: https://storybook.js.org/recipes/tailwindcss and seems to be the simplest option (least configuration).