srwx/react-storybook

React with tailwindcss + Storybook

Versioning

• tailwindcss: v3
  
• postcss: v8
  
• @storybook/react: v6
  

Step

1.) Setup tailwindcss to project. (For React project, follow tailwind guide.)

2.) Init storybook with npx command:

npx sb init

3.) Install these dependencies:

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

4.) Add these config in .storybook/main.js

const path = require("path");

module.exports = {
  // ...
  
  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;
  },
};

5.) Import global.css file to .storybook/preview.js

import "../src/global.css";