StoryBook安装指南仅适用于tailwindcss v3，如何使用tailwindcss v4安装？ 故事书文档中的tailWindCSS安装部分迅速显示，它仅支持V3。 V4尚无官方安装指南。 开始Storyboo ...

Question

我如何将故事书与tailwindcss v4配对？

• 故事书可以多种方式安装。您可以使用Vite或其他工具。使用Vite，可以使用新的@tailwindcss/vite
插件（无邮政信箱）集成TailWindCSS V4。在所有其他情况下，您都需要使用

@tailwindcss/postcss

软件包遵循PostCSS安装。

用vite插件安装tailwindcss v4

Answer 1

@tailwindcss/vite

软件包整合parwindcs。

用Vite Template install Storybook -Storybookdocs

@storybook/builder-vite

软件包 - npmjs.com

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

• 遵循Vite安装指南后，您将拥有一个带有Vite +（React/Vue/angular/etc。）组合的项目。这就是我们可以在以下步骤中整合parwindcss的方式。 with tailwindcss v4带有vite -tailwindcss v4docs
• 要做到这一点，我们需要安装以下软件包：npm install tailwindcss @tailwindcss/vite
the框，故事书的Vite Builder包含一组配置默认值，这些配置默认值与您现有的配置文件并排合并。对于使用Vite Builder的最佳体验，我们建议直接在Vite的配置文件中应用任何配置（即，

vite.config.js|ts

）。

Source：

vite Configuration

-Storybook
• NEXT，需要将Vite插件添加到VITE配置中。 Storybook建议为此使用
vite.config.js|ts

文件。另外，它也可以在

.storybook/main.js|ts

文件中实现。 vite.config.ts

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

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

to Story to Stories to Stories-故事书Docs

---

。/src/tailwind.css

@import "tailwindcss";

并参考CSS在

.storybook/preview.js

中：

import '../src/tailwind.css'; 如果您使用的是Angular，则在

angular.json

中：

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

• 用PostCSS插件安装使用tailwindcss v4 如果您使用Next.js，webpack或任何其他方法使用Storybook，则可以使用PostCSS并通过
@tailwindcss/postcss

软件包整合TailWindCSS V4。

将故事书与next.js template-插入故事书 - 故事书Docs

@storybook/nextjs软件包 - npmjs.com

npm install --save-dev @storybook/nextjs

遵循下一条安装指南后，您将拥有一个带有the Postcss的项目。组合。这就是我们可以在以下步骤中整合parwindcss的方式。 with tailwindcss v4带有postcs -parwindcss v4docs

withnext.js

 -postcss-故事书文档

next.js允许您

customizepostcssconfig

。因此，此框架将自动为您处理您的PostCSS配置。

要做到这一点，我们需要安装以下软件包：
• npm install tailwindcss @tailwindcss/postcss postcss
• 也可以使用Postcss.config.js文件配置PostCSS，当您想根据环境有条件地包含插件时，这很有用。 do

  不使用

  require()
导入PostCSS插件。必须提供插件作为字符串。

postcss.config.js

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

• to Story to Stories to Stories-故事书Docs
• 。/src/tailwind.css

@import "tailwindcss";

并参考CSS在.storybook/preview.js中：

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