Storybook config for TailwindCss 2.0

main.js

// <root>/.storybook/main.js
const cssRe = /\.css$/;

const removeCssRule = (config) =>
  (config.module.rules = config.module.rules.filter(
    (rule) => String(rule.test) !== String(cssRe),
  ));

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    removeCssRule(config);
    config.module.rules.push({
      test: cssRe,
      sideEffects: true,
      use: ["style-loader", "css-loader", "postcss-loader"],
    });
    return config;
  },
};

postcss.config.js

// <root>/postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

preview.js

// <root>/.storybook/preview.js
// this is the relevant line!
import "../src/styles.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
};

styles.css

/* <root>/src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

// <root>/tailwind.config.js
// shouldn't be relevant, but FYI

module.exports = {
  darkMode: false, // or 'media' or 'class'
  plugins: [],
  purge: ["./**/*.tsx"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      cursor: ["disabled"],
    },
  },
};

Packages I'm using that are relevant:

"react": "^17.0.1",
"tailwindcss": "^2.0.4",
"autoprefixer": "^10.2.5",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/addon-links": "^6.1.21",
"@storybook/react": "^6.1.21",
"css-loader": "^5.1.3",
"postcss": "^8.2.8",
"postcss-import": "^14.0.0",
"postcss-loader": "4",
"style-loader": "^2.0.0",

Notice, we're not using postcss-loader 5 (due to this issue)

I had to change my postcss.config.js to:

module.exports = {
  plugins: ["postcss-import", "tailwindcss", "autoprefixer"],
};