FG
💻 Software🌐 Web & Full-Stack

tailwind 3 doesn't work with storybook/webpack setup

Fresh3 days ago
Mar 14, 20260 views
Confidence Score55%
55%

Problem

I'm using macOS, Chrome v96, Node.js 16 I created a github repository with this exact issue - https://github.com/sachinmour/tailwind-issue Basically just do `yarn` and `yarn storybook` and you'll see storybook loaded correctly. change package.json to use tailwind `^3.0.0` and run `yarn` and `yarn storybook` again and you'll see no tailwind is loaded inside storybook.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Fix Tailwind CSS Integration with Storybook in Webpack Setup

Medium Risk

The issue arises because Tailwind CSS requires a PostCSS configuration to process its directives. In the Storybook setup, the PostCSS loader might not be configured correctly to recognize Tailwind CSS, leading to the absence of Tailwind styles in the Storybook environment.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Install PostCSS and Tailwind CSS

    Ensure that PostCSS and Tailwind CSS are installed in your project. This is necessary for processing Tailwind's utility classes.

    bash
    yarn add -D postcss postcss-loader tailwindcss
  2. 2

    Create PostCSS Configuration

    Create a PostCSS configuration file named 'postcss.config.js' in the root of your project. This file will configure PostCSS to use Tailwind CSS.

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

    Update Storybook's Webpack Configuration

    Modify the Storybook Webpack configuration to include the PostCSS loader. This ensures that Tailwind CSS is processed correctly when Storybook builds the styles.

    javascript
    module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    });
    return config;
  },
};
  4. 4

    Include Tailwind CSS in Your Styles

    Ensure that you include Tailwind's base styles in your main CSS file. Create a CSS file (e.g., 'styles.css') and add the following lines to include Tailwind's styles.

    css
    @tailwind base;
@tailwind components;
@tailwind utilities;
  5. 5

    Restart Storybook

    After making the above changes, restart your Storybook server to apply the new configurations.

    bash
    yarn storybook

Validation

To confirm the fix worked, run 'yarn storybook' and check if Tailwind CSS styles are applied correctly in the Storybook environment. You should see Tailwind's utility classes reflected in the components.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

tailwindcsscss