# 使用 Tailwind CSS

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

在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：

1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：

```text
? 请选择你想要的操作 启用可选功能
? 请选择功能名称 启用 「Tailwind CSS」 支持
```

成功开启后，你会看到 `package.json` 中新增了 `tailwindcss` 和 `@modern-js/plugin-tailwindcss` 依赖。

2. 在 `modern.config.ts` 中注册 Tailwind 插件:

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

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

3. 创建 `index.css` 文件，添加以下代码：

```css title="index.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```

:::info
根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
:::

4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：

```js
import './index.css';
```

5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：

```tsx
const Hello = () => (
  <div className="h-12 w-48">
    <p className="text-xl font-medium text-black">hello world</p>
  </div>
);
```

### 配置 Tailwind CSS

在 Modern.js 中，你有两种方式来配置 Tailwind CSS：

1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。

```ts title="tailwind.config.ts"
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
} as Config;
```

:::tip
请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
:::

2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss: {
      content: ['./src/**/*.{js,jsx,ts,tsx}'],
    },
  },
};
```

如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。

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

Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。

如果你的项目仍在使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考以下文章：

- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)

## 浏览器兼容性

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

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

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