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