Tailwind css classes not showing in Storybook build

Question

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.

Answer 1

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:

Answer 2

The above solutions will not work for Tailwind version > 3.0 because of JIT compiler.

Solution 1: Easy solution

in .storybook/preview.js file add this line to compile tailwind generated css files like this -

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

Here tailwindcss/tailwind.css is the tailwind css file. Look, important is I've to add !postcss-loader! to compile tailwind generated css.

You can add also your custom scss file like this if any -

import '!style-loader!css-loader!sass-loader!../src/scss/style.scss';

Here ../src/scss/style.scss is custom scss file.

For most of the people this will work in Tailwind version > 3.0 without any issue.

Solution 2: Kinda Hack solution

Create a custom styled element in preview page

import tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';
const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = tailwindCss;
document.body.appendChild(storybookStyles);

Hope, this will help for new Tailwind users who are working in Tailwind greater than v3.0.