cssreactjstailwind-cssstorybook

Tailwind css classes not showing in Storybook build


I am trying to build my storybook with tailwind css. When running build-storybook the components are rendered with the tailwind classes. Unfortunately, when I build storybook and run the create build storybook-static with npx http-server storybook-static the classes are not loaded into the stories and the components are displayed not styled.

This is a repro repo of my project: https://gitlab.com/ens.evelyn.development/storybook-issue

This is my main.js :

    const path = require('path')

module.exports = {
  "stories": [
    "../src/components/**/**/*.stories.mdx",
    "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },        
   "@storybook/addon-actions",
    "storybook-tailwind-dark-mode"
  ]}

My Projectstructure looks like this:

.storybook 
src
  components 
     subdir
       Button
         index.tsx
         button.stories.js 
  styles
    index.css (<-- tailwindcss file)

Any hints or advice is very appreciated.


Solution

  • 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:

    contents of storybook-static directory