Tailwind CSS Classes Not Showing in Storybook Build

Tailwind css classes not showing in Storybook build

UPDATE: My original answer could be useful to others, so I'll leave it for reference. However, in this case, the problem was in tailwind.config.js.

Change

purge: {
    mode: 'all',
    content: [
      './src/components/**/**/*.{ts, tsx}'
    ],
  },

to

purge: ['./src/**/*.{js,jsx,ts,tsx}'],

ORIGINAL:

Just tested it out and storybook builds as expected for me. I think the key difference in our configurations is that I am not making changes to Storybook's webpack config in main.js. Rather, I am using @storybook/addon-postcss for postcss@^8 (required for tailwind@^2):

// main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

I specify the necessary plugins in a postcss.config.js (in my project root):

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

It's also worth noting that I import Tailwind directly in Storybook's preview.js instead via my own css file:

// preview.js
import 'tailwindcss/tailwind.css';
export const parameters = {...}

Hopefully, making those changes will get Tailwind working for you.

For comparison (see comments below), here are the contents of my build storybook-static directory:

How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript

Update!

Simply doing this worked:

Import

import 'tailwindcss/tailwind.css';

into preview.js

Thanks to https://stackoverflow.com/a/68022201/12198222

Storybook-tailwind. How should I add tailwind to storybook

Storybook recommends using the @storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader):

1. Add the postCSS addon to your installation

   npm i -D @storybook/addon-postcss     # or
   yarn add -D @storybook/addon-postcss
   

2. Create the postcss.config.js in the project root

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

3. Add the plugin to your .storybook/main.js

   // .storybook/main.js
   module.exports = {
     ...
     addons: [
       ...
       {
         name: '@storybook/addon-postcss',
         options: {
           cssLoaderOptions: {
             // When you have splitted your css over multiple files
             // and use @import('./other-styles.css')
             importLoaders: 1,
           },
           postcssLoaderOptions: {
             // When using postCSS 8
             implementation: require('postcss'),
           },
         },
       },
     ],
   };
   

4. Import your css file in the .storybook/preview.js

   // .storybook/preview.js
   import '../src/styles.css';
   

How to setup Storybook with Tailwindcss, ReactJS and Typescript

To resolve paths in Storybook, we'll be using tsconfig as the source.
We assume you have installed a ReactJS project with the typescript template already.

Setting Absolute Paths

1. Define absolute paths in typescript

Add your absolute paths under "paths" in tsconfig.js.

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "#assets/*": ["./assets/*"],
      "#components/*": ["./components/*"],
      // etc.
    }
  }
  "include": ["src"]
}

2. Extend the tsconfig absolute paths to work in Storybook

Install the tsconfig-paths-webpack-plugin from npm. Has millions of weekly downloads at time of writing.

$ npm install -D tsconfig-paths-webpack-plugin
// or
$ yarn add -D tsconfig-paths-webpack-plugin

Under .storybook/main.js extend the tsconfig path resolution by adding the following to your module.exports.

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // Add the following block of code in addition to what's existing
  "webpackFinal": async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

Source

Parsing Tailwind Styles in Storybook

Add the following two lines of code at the top of your .storybook/preview.js file.

// .storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';

Source

Your tailwindcss should parse now.

Additional files

For Tailwind v3+, make sure your tailwind.config.js doesn't have the purge option and doesn't explicitly state JIT. Mine looks like this:

// tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

---

Related Topics