#Tailwind CSS 插件

该插件基于 @tailwindcss/webpack 实现，用于在 Rsbuild 中集成 Tailwind CSS v4。

相比基于 @tailwindcss/postcss 的集成方式，该插件无需通过 PostCSS 执行 Tailwind CSS 转换，因此提供了更好的构建性能。

#快速开始

#安装插件

你可以通过如下的命令安装插件：

npm add @rsbuild/plugin-tailwindcss tailwindcss -D

yarn add @rsbuild/plugin-tailwindcss tailwindcss -D

pnpm add @rsbuild/plugin-tailwindcss tailwindcss -D

bun add @rsbuild/plugin-tailwindcss tailwindcss -D

deno add npm:@rsbuild/plugin-tailwindcss npm:tailwindcss -D

#注册插件

你可以在 rsbuild.config.ts 文件中注册插件：

import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';

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

#引入 CSS

在 CSS 入口文件中添加 @import 指令，引入 Tailwind CSS：

@import 'tailwindcss';

然后在 JavaScript 或 TypeScript 入口中引入这个 CSS 文件：

import './index.css';

现在你可以在 HTML 或框架组件中使用 Tailwind 的 utility classes：

<h1 class="text-3xl font-bold underline">Hello world!</h1>

#选项

#optimize

启用 Tailwind CSS 自带的 Lightning CSS optimization。

该能力与 Rsbuild 内置的 Lightning CSS optimization 存在重叠，建议仅在禁用 Rsbuild 内置 Lightning CSS optimization 的情况下使用该选项。

• 类型：

type Optimize =
  | boolean
  | {
      minify?: boolean;
    };

• 默认值： false

当 optimize 为 false 时，Tailwind CSS 仍然会编译 Tailwind directives 并生成 utilities，但会跳过 Tailwind 自带的 Lightning CSS optimization 步骤。

pluginTailwindcss({
  optimize: true,
});

如果你希望启用 Tailwind CSS 自带的 optimization，但不启用其中的 minify，可以传入对象并省略 minify，或者将其设置为 false：

pluginTailwindcss({
  optimize: {
    minify: false,
  },
});

如果你需要显式启用 Tailwind CSS 自带的 minify：

pluginTailwindcss({
  optimize: {
    minify: true,
  },
});