> 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 CSS

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

## 在 Modern.js 中使用 Tailwind CSS

在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照 Rsbuild 操作步骤进行配置，Rsbuild 支持 Tailwind CSS v3 和 v4 版本：

- [Tailwind CSS v3](https://v2.rsbuild.rs/zh/guide/styling/tailwindcss-v3#tailwind-css-v3)
- [Tailwind CSS v4](https://v2.rsbuild.rs/zh/guide/styling/tailwindcss)

## Tailwind CSS 自动补全

Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。

你可以参考以下步骤来启动自动补全功能：

1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。

## 浏览器兼容性

Tailwind CSS v3 不支持 IE 11 浏览器，相关背景请参考：

- [Tailwind CSS v3 - Browser Support](https://tailwindcss.com/docs/browser-support)。

如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。