CODEWITHSUNDEEP
next.jstailwind-cssstorybookcss-loadersass-loader
hdotluna
hdotluna

Reputation: 5732

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

Upvotes: 5

Views: 1923

Answers (2)

aswinshenoy
aswinshenoy

Reputation: 11

When I tried out the solution by @hdotluna, it didnt seem to work for me with the new storybook 7. However, later I found the solution from a comment on storybook repo for a similar issue.

In the storybook main.js file, adding postcss-loader to webpack config seemed to have done the trick.

Here is how I have updated my configuration -

const path = require('path');
module.exports = {
  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-styling",  
  ],
  "framework": {
    name: "@storybook/react-webpack5",
    options: {}
  },
  "webpackFinal": async (config, {
    configType
  }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], // note the 'postcss-loader' added
      include: path.resolve(__dirname, '../src/')
    });
    return config;
  }
};

postcss.config.js (also required)

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

style.scss (my custom css file)

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

.editor-container ol {
    @apply list-decimal;
}
.editor-container ul {
    @apply list-disc;
}

And I used it by importing the scss file to storybook preview.js file.

Upvotes: 0

hdotluna
hdotluna

Reputation: 5732

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;

Upvotes: 2

Related Questions