tailwind css - Storybook installation guide is only available for TailwindCSS v3, how can I install it with TailwindCSS v4? - St

admin管理员组

文章数量:1390756

Navigating to the TailwindCSS installation section in the Storybook documentation quickly reveals that it only supports v3. There is no official installation guide for v4 yet.

• Get started Storybook with TailwindCSS (v3) - Storybook Docs

How can I pair Storybook with TailwindCSS v4?

Navigating to the TailwindCSS installation section in the Storybook documentation quickly reveals that it only supports v3. There is no official installation guide for v4 yet.

• Get started Storybook with TailwindCSS (v3) - Storybook Docs

How can I pair Storybook with TailwindCSS v4?

• tailwind-css
• vite
• storybook
• postcss
• tailwind-css-4

Share Improve this question Follow asked Mar 12 at 12:00 rozsazoltanrozsazoltan 11.3k66 gold badges2020 silver badges5959 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Storybook can be installed in multiple ways. You can use Vite or other tools. With Vite, TailwindCSS v4 can be integrated using the new @tailwindcss/vite plugin (without PostCSS). In all other cases, you need to follow the PostCSS installation using the @tailwindcss/postcss package.

Install with TailwindCSS v4 by Vite Plugin

If you are using Storybook with Vite, you can integrate TailwindCSS using the @tailwindcss/vite package.

• Install Storybook with Vite template - Storybook Docs
• @storybook/builder-vite package - npmjs

npm install @storybook/builder-vite --save-dev

After following the Vite installation guide, you will have a project with the Vite + (React/Vue/Angular/etc.) combination. This is how we can integrate TailwindCSS in the following steps.

• Get started TailwindCSS v4 with Vite - TailwindCSS v4 Docs

To do this, we need to install the following packages:

npm install tailwindcss @tailwindcss/vite

Out of the box, Storybook's Vite builder includes a set of configuration defaults for the supported frameworks, which are merged alongside your existing configuration file. For an optimal experience when using the Vite builder, we recommend applying any configuration directly inside Vite's configuration file (i.e., vite.config.js|ts).

---

Source: Vite Configuration - Storybook

Next, the Vite plugin needs to be added to the Vite configuration. Storybook recommends using the vite.config.js|ts file for this. Alternatively, it can also be implemented in the .storybook/main.js|ts file.

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

• Provide Tailwind to stories - Storybook Docs

./src/tailwind.css

@import "tailwindcss";

And reference to CSS in .storybook/preview.js:

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

Except if you're using Angular, then in angular.json:

{
 "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": ["src/tailwind.css"]
    }
  } 
}

Install with TailwindCSS v4 by PostCSS Plugin

If you are using Storybook with Next.js, Webpack, or any other method, you can use PostCSS and integrate TailwindCSS v4 through the @tailwindcss/postcss package.

• Install Storybook with Next.js template - Storybook Docs
• @storybook/nextjs package - npmjs

npm install --save-dev @storybook/nextjs

After following the Next.js installation guide, you will have a project with the PostCSS with Next.js/etc. combination. This is how we can integrate TailwindCSS in the following steps.

• Get started TailwindCSS v4 with PostCSS - TailwindCSS v4 Docs
• PostCSS with Next.js - Storybook Docs

Next.js lets you customize PostCSS config. Thus this framework will automatically handle your PostCSS config for you.

To do this, we need to install the following packages:

npm install tailwindcss @tailwindcss/postcss postcss

It is also possible to configure PostCSS with a postcss.config.js file, which is useful when you want to conditionally include plugins based on environment.

Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

or when use Webpack configuration in ./storybook/main.ts:

import type { StorybookConfig } from '@storybook/angular'

export default {
  webpackFinal: async (config) => {
    config.module?.rules?.push({
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['@tailwindcss/postcss'],
            },
          },
        },
      ],
    })
    return config
  },
} satisfies StorybookConfig

• Provide Tailwind to stories - Storybook Docs

./src/tailwind.css

@import "tailwindcss";

And reference to CSS in .storybook/preview.js:

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

本文标签：