Storybook-tailwind. How should I add tailwind to storybook

Question

I want to add tailwind to storybook. So that Stories will render just like it will render on web.

I used create-react-app project-name --template typescript to create the project.

Then to install the tailwind I followed this https://tailwindcss.com/docs/guides/create-react-app instruction from the documentation of tailwind.

Once I finished it I ran the code npm sb init. Which made sure that storybook ran.

Now I need to tell storybook to use tailwindcss for styling. But I have no idea how.

Every other answer I saw tells to edit postcss.config.js files.

But I followed this https://tailwindcss.com/docs/guides/create-react-app documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.

For clarity I will include some configuration file below.

craco.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

.storybook/preview.js

import "../src/index.css"

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

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

src/index.css

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

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json

`{
  "name": "memory",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.0.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.8",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Arrowood

Answer 1

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';
   

Servile

This didn't work for me for some reason. FWIW, I'm using postcss7 as this is recommended in the install page on tailwind. ``` SyntaxError (1:1) Unknown word > 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--10-1!../node_modules/postcss-loader/dist/cjs.js!./index.css"); ``` – Shivaree

Tailwind requires PostCSS 8 (not 7) as stated in the docs: tailwindcss.com/docs/installation#install-tailwind-via-npm – Servile

it's not working for me – Iminourea

CRA doesn't support PostCSS 8 though, so you need to install a postcss 7 compat build: tailwindcss.com/docs/guides/create-react-app – Shivaree

@Shivaree How do i install a postcss 7 compatible build? – Tax

The tailwindcss link above used to describe how to do this (they had a special postcss7 compat build you would install. Looks like things might have changed and potentially postcss 8 is now supported. – Shivaree

I could NOT get addon-postcss working in 2022, but the webpackFinal config from the top voted answer did work. I kept getting "Unknown word" errors like github.com/storybookjs/addon-postcss/issues/33 no matter what config I tried, and agree with the comment there that it's basically abandoned (tons of neglected issues and no commits in 16 months). – Khan

Answer 2

You're almost there.

The missing piece of your config is to add a webpack configuration to apply tailwind to postcss-loader:

const path = require('path')

module.exports = {
  stories: [
    '../src/**/*.stories.mdx', 
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
}

Gayla

Maybe you should create a boilerplate for this – Transition

Oops, I just had to add import "../src/index.css" in .storybook/preview.js 😁 – Harrod

@sudo_kaizen I added a storybook design system to a boilerplate I maintain, maybe this could help – Rusticate

Which version of postcss-loader should I use with a React library? I ran npm install postcss-loader but am getting an error in the loader function of postcss-loader/dist/index.js saying that this.getOptions is not a function. – Stitt

Check this out for newer postcss versions – Edwyna

How can I use tailwind and postcss without webpack? Also using rollup to export the library. – Dorey

I also had to add import "../src/index.css" in .storybook/preview.js like @AlaDouagi to make it works. – Judie

I had to import the CSS and change the options field as follows: options: { postcssOptions: { plugins: [require("tailwindcss"), require("autoprefixer")]}} See this link for details, and sorry for the formatting! – Summand

Confirmed, like @JohnMcCollum I got it working after changing to nested postcssOptions and getting rid of ident. Could you update this answer for 2022? – Khan

Answer 3

TAILWIND STORYBOOK CRA [2022-2023(hopefully)]

package.json

"devDependencies": {
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/node-logger": "^6.5.9",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "autoprefixer": "^10.4.7",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint": "^8.17.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.1",
    "webpack": "^5.73.0"
  }

tailwind.config.js

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

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

.storybook/main.js

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: "@storybook/react",
  core: {
    "builder": "@storybook/builder-webpack5"
  }
}

.storybook/preview.js

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

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Haulm

The last import string is essential. Why do we have to write this import instead of the default tailwindcss/tailwind.css import? – Hello

@Hello I think it is the place which styles are generated in mount. – Haulm

Answer 4

The answer was right but in the latest CRA I have to config like this:

config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            // HERE: OPTIONS
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });

Surovy

This did not work for me in latest CRA. The accepted answer works fine. – Superfecundation

Answer 5

Similar to ofhouse's answer, but here is a solution if you don't want to have an extra postcss.config.js for only a few lines or if you want use typescript in everything (as the loader doesn't pick up postcss.config.ts)

1. Add the official postCSS addon

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

2. Config main.ts & tailwind.config.ts

/* .stories/main.ts */

import postcss from 'postcss';
import * as tailwindcss from '../tailwind.config';

import type { StorybookConfig } from '@storybook/react/types';

export const addons: StorybookConfig['addons'] = [
  // other addons,
  {
    name: '@storybook/addon-postcss',
    options: {
      postcssLoaderOptions: {
        implementation: postcss,
        postcssOptions: {
          plugins: {
            tailwindcss, // or you can nest your options entirely here
            autoprefixer: {
              // autoprefixer options
            },
          },
        },
      },
    },
  },
];

/* tailwind.config.ts */

import type { TailwindConfig } from 'tailwindcss/tailwind-config';

export const theme: TailwindConfig['theme'] = {
  // theme options
}

// other options

Ordain

Answer 6

I could "fix it" by running the tailwind-CLI and building the global.css file and importing it to ./storybook/preview.js

here's the cli command used.

npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch

then import it from the output path (-o flag) in the command above.

// ./storybook/preview.js

import './global.css';
...

Infant

Added this line to my script for storybook. None of the other solutions worked, unfortunately. – Wispy

Storybook v7 now have support try this addon @storybook/addon-styling – Infant

The "solution" from @storybook didnt work either. – Wispy

Answer 7

This recipe assumes that you have a React app using Tailwind CSS and have just set up Storybook >=7.0 using the getting started guide. Don’t have this? Follow Tailwind's setup instructions then run:

Add Storybook:

npx storybook@latest init

Add the @storybook/addon-styling package to your DevDependencies

yarn add -D @storybook/addon-styling

Then register with Storybook in .storybook/main.js.

module.exports = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-styling'],
};

Marlie