tailwindcss: tailwind 3 doesn't work with storybook/webpack setup

Hi, the above staffs didn’t worked for me. here is the quick solution - in .storybook/preview.js file add this line to compile tailwind generated css files like this -

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

Here tailwindcss/tailwind.css is the tailwind css file. Look, important is I’ve to add !postcss-loader! to compile tailwind generated css.

There are more solutions answered here - https://stackoverflow.com/a/70805809/5543577

@nvsd @LinnJS @paulgendek so, I figured out what the problem was, I don’t think it was because of what you guys said. The problem is in v3 of tailwindcss has JIT enabled by default and that means it’ll only add css that you use in your components, and in v2 if you didn’t define mode and left the purge config as an empty array, it would add all of tailwindcss, but now you MUST define content property with all the places you’re using tailwindcss and as soon as I updated content to include my src folder, everything started working as usual. I’ve updated my original repo with working code https://github.com/sachinmour/tailwind-issue

If you guys don’t agree, let me know, otherwise, I’ll close this issue in 2 days.

We were able to get this working by NOT using @storybook/addon-postcss and moving a copy of postcss.config.js and tailwind.config.js into the .storybook directory.

.storybook/postcss.config.js:

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js')
    },
    autoprefixer: {}
  }
};

./storybook/tailwind.config.js:

const { join } = require('path');

module.exports = {
  presets: [require('../tailwind.config.js')],
  content: [join(__dirname, '../libs/**/*.(js|jsx|ts|tsx)')],
  theme: {},
  plugins: []
};

Everything else is the traditional setup (following the v3 upgrade guide).

@ManiruzzamanAkash answer almost fully worked for me. I also needed to add the line below for it to hot reload.

import 'tailwindcss/tailwind.css';

I documented the full setup below in case anyone else is struggling as this took me a day - includes setting up absolute paths. Question is how to setup Storybook with TailwindcssV3, ReactJS and Typescript: https://stackoverflow.com/questions/71329335/how-to-setup-storybook-with-tailwindcss-reactjs-and-typescript

I’m having a similar issue. I tried forcing Storybook to use PostCSS 8+ per the docs, but get the following error:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) .storybook/tailwind-imports.css Unknown word

  1 | 
> 2 |       import API from "!../../../../../../node_modules/@nrwl/web/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../../../../node_modules/@nrwl/web/node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../../../../node_modules/@nrwl/web/node_modules/style-loader/dist/runtime/insertBySelector.js";

I have been working on a TailwindCSS component library for some time now. It took me forever to get Tailwind v2 working with Storybook nicely. I just upgraded to Tailwind V3 and had no issues like this.

My main.js file looks like this:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-designs",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
};

and my preview.js file looks like:

import 'normalize.css';
import '../src/tailwind.css';

Not sure if this helps but I cant seem to reproduce your all’s error. I do have a similar error with my GatsbyJS project though 🙁 which is how I found this issue.

@jrock2004 For those who are still having this problem and is using postcss >= 8, I suggest you to do as following. Note: Credit to OP of these fixes. Thanks to them my project is working fine now.

Add this to tailwind.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path")

module.exports = {
  content: [path.join(__dirname, "./src/**/*.(js|jsx|ts|tsx)")],
  theme: {
    extend: {},
  },
  variants: {}
  plugins: [],
}

Add this to preview.js

import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

This has helped me fix the problem and I hope it can help you too

@LinnJS @paulgendek if you can post a working repo or link, that’d be great.

I can confirm from @vatana7 that this did work for me just fine

@jrock2004 What is the solution here as I have tried some of these things and it just does not work. Which solution is the reason we closed this?

I have the same problem, but the following solutions helped me. https://stackoverflow.com/a/71877841/18970146

I am still trying to figure this out. Seems like tailwind and storybook just are not friends right now

If anyone is still having issues with this, here is what I did step by step

Install storybook postcss addon

yarn add -D @storybook/addon-postcss

Add it into your .storybook/main.js file

module.exports = {
  addons: [
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
}

import tailwind into your .storybook/preview.js file

import 'tailwindcss/tailwind.css';

restart storybook server and hopefully tailwind will work with storybook

yarn storybook

@junaidrasheed You’ll likely get much quicker help posting this in discussions since this doesn’t relate to the issue.