Storybook errors when adding tailwindcss

Question

I'm trying to add tailwindcss v3 to existing storybook setup.

I have tried and followed every guide out there with similar features. Please help.

What it was working before trying to setup tailwindcss

• Storybook ran and compiled components and stories.
• PostCSS 8+ with a few plugins.

What I did

• Installed tailwindcss

• Added tailwindcss:{} to postcss.config.js

• I imported the newly added styles/globals.css into storybook/preview.js

Like this: import './styles/globals.css'; and added the directives

/******** storybook/styles/globals.css ********/

@tailwind base;
@tailwind components;
@tailwind utilities;

• I set the following config in main.js

/******** storybook/main.js ********/

module.exports = {
  stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['./public'],
  core: {
    builder: 'webpack5',
  },
};

The error I get when running yarn storybook.

/******** iTerm2 output ********/

99% done plugins webpack-hot-middleware
webpack built preview 02e06cdf44b2c261d88f in 13260ms
ModuleBuildError: Module build failed 
(from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/*MY_PROJECT*/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)

Answer 1

The issue seems to be that @storybook/addon-postcss doesn't go along quite well with TailwindCss v3 JIT and storybooks hot reload.

I got it to work properly by using the postcss-loader webpack loader in the meantime.

Install these deps:

yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 postcss-loader webpack

// .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: {},
  },
};