next.jstailwind-cssstorybookcss-loadersass-loader

Tailwindcss @apply is not working in storybook


I am using Next css modules (sass). I tried every solutions I've encountered but I still cannot get it working.

My problem is, when I run the storybook, the css doesn't compile @apply method from tailwind. There is a simple solution which is remove the @apply and use the classname directly to the element but I don't have the time to do because the application is too big at this point.

// main.js
const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          postcssOptions: {
            plugins: [require.resolve('tailwindcss')],
          },
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.sass$/,
      use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

output in storybook

enter image description here

Any help would be appreciated


Solution

  • I managed to make it work by using this config.

    .storybook/main.js

    const path = require('path');
    const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
    
    module.exports = {
      stories: [
        '../stories/**/*.stories.mdx',
        '../stories/**/*.stories.@(js|jsx|ts|tsx)',
      ],
      addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        'storybook-addon-next-router',
        {
          name: '@storybook/addon-postcss',
          options: {
            postcssLoaderOptions: {
              postcssOptions: {
                plugins: [require.resolve('tailwindcss')],
              },
              implementation: require('postcss'),
            },
          },
        },
      ],
      framework: '@storybook/react',
      webpackFinal: async (config) => {
        config.resolve.plugins.push(new TsconfigPathsPlugin());
    
        config.module.rules.push({
          test: /\.sass$/,
          use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
          include: path.resolve(__dirname, '../'),
        });
    
        return config;
      },
    };
    

    .storybook/preview.js

    import '../styles/globals.css';
    import { RouterContext } from 'next/dist/shared/lib/router-context';
    
    export const parameters = {
      actions: { argTypesRegex: '^on[A-Z].*' },
      controls: {
        matchers: {
          color: /(background|color)$/i,
          date: /Date$/,
        },
      },
      nextRouter: {
        Provider: RouterContext.Provider,
      },
    };
    

    In global.css, I imported the tailwind utilities

    global.css

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