[Bug]: Configuration with TailwindCss

[tibo-glamarche]

Describe the bug

I have followed the procedure in the documentation and the proposed solution of other similar issues but it still doesn't work.Here is what I have tried:

1. Add my index.css file in preview.tsx
2. I tried importing "tailwindcss/tailwind.css", but that doesn't work.
3. I messed around with tailwind configs.

In my app, I import the same index.css and it works.

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (120.0.2210.61)
  npmPackages:
    @storybook/addon-essentials: ^7.4.5 => 7.4.5
    @storybook/addon-interactions: ^7.4.5 => 7.4.5
    @storybook/addon-links: ^7.4.5 => 7.4.5
    @storybook/blocks: ^7.4.5 => 7.4.5
    @storybook/react: ^7.4.5 => 7.4.5
    @storybook/react-vite: ^7.4.5 => 7.4.5
    @storybook/testing-library: ^0.2.1 => 0.2.1
    storybook: ^7.4.5 => 7.4.5

Additional context

I am using React + vite
Tailwind v3.3.3

[felixmokross]

I also have issues getting Tailwind CSS to work with a vite-based Storybook. In my case, it is a new Remix app with its built-in Tailwind CSS support.

I did the following:

1. Set up Storybook, choosing Vite as the bundler
2. Work around [Bug]: Vite Pre-transform error: Failed to load url /sb-preview/runtime.js  #25256 by adding the following to .storybook/main.ts:

async viteFinal(config) {
  // Merge custom configuration into the default config
  return mergeConfig(config, {
    assetsInclude: ["/sb-preview/runtime.js"], // Bug workaround, see https://github.com/storybookjs/storybook/issues/25256
  });
},

3. Add import "../app/tailwind.css"; to .storybook/preview.ts. This is the file with the @tailwind directives.

When I inspect the preview, I see that the CSS file is present, but the @tailwind directives have not been replaced:

Is this an issue with PostCSS? To my understanding, PostCSS doesn't need to be configured in vite-based storybooks.

[felixmokross]

Ok, for Remix, I figured it out: while Remix automatically knows how to use Tailwind CSS, PostCSS needs to be configured for Storybook so that it knows that we want to use Tailwind CSS:

1. Add the autoprefixer PostCSS plugin (Remix doesn't come with it): npm i -D autoprefixer
2. Add a postcss.config.cjs file to the project as per the Tailwind CSS documentation:

// Explicit PostCSS config file to support Tailwind CSS in Storybook
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. Run Storybook

The Tailwind CSS stylings are applied now.

@tibo-glamarche Not sure if this is the same issue in your case. Make sure your project has a PostCSS config file.

[tibo-glamarche]

I already have a postcss config file with the same configuration as you, but it doesn't work. Thanks anyway!

[shilman]

@integrayshaun is this something you can help with?

[alejomejia]

Same problem here using NextJS

[ShaunEvening]

@tibo-glamarche @alejomejia

can you share a reproduction of your problem so that I can dig in?

[rafalwawrzyk]

any progress with this? same story with TurboRepo and Next.js, tailwind classes not applied even with direct css file with tailwind config. Only thing that works is to import output css file

[ShaunEvening]

@rafalwawrzyk I'm still waiting on a reproduction from someone so that I can investigate. Can you provide one?

[Flower-dev]

Hey! I have the same problem with TurboRepo and React when I use this example: https://github.com/vercel/turbo/tree/main/examples/design-system and I install tailwindCSS.

[rafalwawrzyk]

If we have structure like this in monorepo:

- apps
  - storybook
  - some-project-1
  - some-project-2

storybook is a standalone application

 - packages
   - ui 

In ui package we got all components with stories
Storybook app see the stories without any problem after configuration, but even if we import directly global.css with tailiwnd directives nothing happens. Only way when it's worked is when we import tailwind output from builded project.

Also to precise this example, some-project-1 and some-project-2 are next apps, when the storybook is based on react app

If you have questions, feel free :)

[tibo-glamarche]

I have found the solution to my problem. Turns out I only needed to add this:
important: "body"
to the tailwind.config.js. I am using MaterialUI so maybe the styles were conflicting or something. Before I had:
important: "#root"
because I was targeting the root of my React project. I guess it doesn't work with Storybook

[valentinpalkovic]

I've put together an example repository, which is a monorepo, based on turbo and has successfully set up Tailwind with Storybook: https://github.com/valentinpalkovic/example-turbo-repo-tailwind-storybook

The folder structure looks like this:

• apps/docs
  • storybook
• packages
  • ui

Let's go through the steps I've done to make it work:

Init Tailwind

I have installed and initialized Tailwind in packages/ui:

• cd ./packages/ui
• pnpm install tailwind
• npx tailwindcss init

I have followed the tailwind guide to configure content, but be aware to use an absolute path glob instead so that Tailwind doesn't mess up if it gets loaded from Storybook

+ const { join } = require("node:path");

/** @type {import('tailwindcss').Config} */
module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  content: [join(__dirname, "./src/**/*.{js,ts,jsx,tsx}")], 
  theme: {
    extend: {},
  },
  plugins: [],
}

Setup Tailwind for Storybook

In Storybook Vite-based projects, Vite will automatically detect a postcss.config.js file and will apply all the setup plugins.

I have installed and initialized tailwind and the autoprefixer plugin as described in the official Tailwind docs for Vite:

• cd ./apps/docs
• pnpm install tailwindcss postcss autoprefixer
• npx tailwindcss init -p

Now delete the generated tailwind config, because we will refer the one in packages/ui. Also, I have renamed postcss.config.js to postcss.config.cjs because apps/docs is declared as an ESModule in its package.json (type: module). The content of postcss.config.cjs is the following:

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    require("autoprefixer"),
    require("tailwindcss")("../../packages/ui/tailwind.config.js"),
  ],
};

module.exports = config;

As the last step, I've created a preview.js file in apps/docs/.storybook with the following content:

import "../../../packages/ui/index.css";

After this, Storybook starts and correctly applies Tailwind classes.

Reproduction

1. Checkout the aforementioned repo
2. pnpm install
3. pnpm run dev
4. An underlined paragraph should be displayed

Please let me know if it doesn't work in your scenario or you still have questions.

[valentinpalkovic]

Heads up @kylegach. Do you think this is worth documenting somewhere?

[karrui]

somehow all the above methods did not work, but the method described below works for me.

If you have a monorepo, use NextJS and exports your stylesheet (e.g. globals.css) via a package, Storybook (or tailwind) will not compile /inject the css into the stories.

You will need to duplicate the stylesheet into your application instead of importing for the types to be compiled and accessible by storybook. Tore my hair out for a couple hours before trying this last ditch effect (because I thought I was already importing the tailwind css file!!!) and it miraculously worked.

With the following monorepo structure:

apps
  └─ web (nextjs app)
      └─ .storybook
tooling
  └─ tailwind
      └─ styles.css
      └─ package.json (exports `styles.css` as `./styles`)

🚫 Won't work

// apps/web/.storybook/preview.ts
import "@org/tailwind/styles"
// Also won't work
import "../../../relative/path/to/tailwind/styles.css"

Importing the tailwind styles from outside of root does not seem to work. Hypothesis: might be due to Storybook's NextJS framework plugin (and its corresponding webpack config) not recognizing the import as a CSS file to process.

✅ Will work

Create a styles.css file (instead of importing from another package) in the NextJS app's .storybook directory with the tailwind directives, and tailwind will begin to work:

/* apps/web/.storybook/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* copy whatever else was exported from the package too */

// apps/web/.storybook/preview.ts
import "./styles.css"