> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# Tailwind 插件变更

Modern.js 3.0 推荐通过 Rsbuild 原生方式接入 Tailwind CSS，不再依赖 `@modern-js/plugin-tailwindcss` 插件，从而充分利用 Rsbuild 提供的更灵活的配置能力和更优的构建体验。

## 迁移步骤

本小节中的迁移操作仅当项目中使用了 `@modern-js/plugin-tailwindcss` 插件，且 `tailwindcss` 版本为 v2 或 v3 时才需要执行。

### 1. 移除旧插件

移除 `@modern-js/plugin-tailwindcss` 依赖和配置。

**2.0 版本：**

```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';
import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';

export default defineConfig({
  plugins: [tailwindcssPlugin()],
});
```

**3.0 版本：**

```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';

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

同时移除 `package.json` 中的 `@modern-js/plugin-tailwindcss` 依赖。

### 2. 配置 PostCSS

创建或更新 `postcss.config.cjs` 文件。

```js title="postcss.config.cjs"
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};
```

### 3. Tailwind CSS 配置迁移

**单一配置情况**：

- 若仅在 `tailwind.config.{ts,js}` 中配置，则无需额外处理
- 若仅在 `modern.config.ts` 中配置，需将 Tailwind 相关配置移植到 `tailwind.config.{ts,js}` 中

**双重配置情况**：

若在 `tailwind.config.{ts,js}` 与 `modern.config.ts` 中都有配置，需要合并两者的配置内容，并将合并后的配置移植到 `tailwind.config.{ts,js}`。

**特殊目录处理**：

若项目中存在 storybook 或 config/html 目录，需在 `tailwind.config.{ts,js}` 的 `content` 中补充：

```ts title="tailwind.config.ts"
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './storybook/**/*', // 如果存在 storybook 目录
    './config/html/**/*.{html,ejs,hbs}', // 如果存在 config/html 目录
  ],
};
```

### 4. CSS 样式引入

将 CSS 导入方式变更为 `@tailwind` 指令方式。

**2.0 版本：**

```css
@import 'tailwindcss/base.css';
@import 'tailwindcss/components.css';
@import 'tailwindcss/utilities.css';
```

**3.0 版本：**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```