在 UmiJS 中如何正确配置 Tailwind CSS？

在 UmiJS 中配置 Tailwind CSS 通常涉及几个步骤，以下是一个基本的配置流程：

1. 首先，需要安装 Tailwind CSS 和其相关的工具。可以通过 npm 或 yarn 来安装：

   npm install tailwindcss postcss-cli autoprefixer --save-dev

或者

   yarn add tailwindcss postcss-cli autoprefixer --dev

2. 接下来，在项目根目录下初始化 PostCSS 配置文件。通常情况下，可以运行以下命令来创建 `postcss.config.js` 文件：

   npx tailwindcss init

这个命令会生成一个基本的 Tailwind CSS 配置文件，你可以在其中自定义你的设计系统。

3. 在 `tailwind.config.js` 文件中配置你的内容路径。确保 Tailwind CSS 能够扫描到所有用到它的文件。例如：

   module.exports = {
     content: [
       './src/**/*.{js,jsx,ts,tsx}',
     ],
     // 其他配置...
   };

4. 在你的 CSS 文件中引入 Tailwind CSS 的基础样式。通常是在全局的 CSS 文件中，比如 `src/global.css` 或者 `src/index.css`，添加以下代码：

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

5. 最后，在 UmiJS 项目中，需要在配置文件（通常是 `.umirc.js` 或 `config/config.js`）中设置 CSS 处理器，使得 UmiJS 能够识别和处理上述 CSS 文件。配置 `styles` 选项：

   export default {
     // 其他配置...
     styles: {
       css: true,
     },
   };

6. 现在，你可以开始使用 Tailwind CSS 的类名来编写你的组件了。