Tailwind 插件变更

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

迁移步骤

本小节中的迁移操作都是仅当项目中实际使用了 @modern-js/plugin-tailwindcss 插件时才需要执行。

1. 移除旧插件

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

2.0 版本：

modern.config.ts

import { defineConfig } from '@modern-js/app-tools';
import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';

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

3.0 版本：

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 文件。

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 中补充：

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 版本：

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

3.0 版本：

@tailwind base;
@tailwind components;
@tailwind utilities;

#Tailwind 插件变更

#迁移步骤

#1. 移除旧插件

#2. 配置 PostCSS