使用 Tailwind CSS v4#

Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。

你可以通过 PostCSS 插件来在 Rsbuild 中接入 Tailwind CSS。

选择 Tailwind CSS 版本#

当前文档介绍的是 Tailwind CSS v4 的接入方式。

请注意 Tailwind CSS v4 使用了很多现代 CSS 特性，比如 Cascade Layers，如果你的目标浏览器不支持这些特性，请优先使用 Tailwind CSS v3，参考 使用 Tailwind CSS v3。

更多信息请参考 Tailwind CSS - Compatibility。

安装 Tailwind CSS#

Rsbuild 内置支持 PostCSS，你可以安装 tailwindcss 和 @tailwindcss/postcss 包来接入 Tailwind CSS：

npm add tailwindcss @tailwindcss/postcss -D

配置 PostCSS#

你可以通过 postcss.config.cjs 或 tools.postcss 来注册 Tailwind CSS 的 PostCSS 插件。

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

引入 CSS#

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

@import 'tailwindcss';

完成#

你已经完成了在 Rsbuild 中接入 Tailwind CSS 的全部步骤！

你可以在任意组件或 HTML 中使用 Tailwind 的 utility classes，比如：

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

更多用法请参考 Tailwind CSS 文档。

VS Code 插件#

Tailwind CSS 提供了 Tailwind CSS IntelliSense 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。

你可以在 VS Code 中安装该插件，即可开启自动补全功能。