[!info] 关联笔记

• 路线：Tailwind 学习路线
• 前置：心智模型
• 构建：Vite 学习路线
• 坑：Monorepo 多包配置

安装 Tailwind 并写第一组工具类

目标

在 Vite 应用中接入 Tailwind，使工具类真实生成 CSS，并完成 dev/build 基本验收。

这个场景为什么出现

最常见故障不是“不会写 class”，而是：

• 源文件未被扫描 → 类不生成
• 动态拼接 class 导致扫描看不到完整类名
• monorepo 扫错包

前置

• 已有 Vite 项目（或先走 安装 Vite）
• 按 官方 Installation 选择对应主版本步骤（v3 配置文件 vs v4 官方推荐流可能不同）

步骤（版本无关清单）

1. 安装官方文档指定的 Tailwind 与集成包
2. 配置 content/源扫描 覆盖：
   • ./index.html
   • ./src/**/*.{js,ts,jsx,tsx,vue}
   • monorepo 还要覆盖 UI 包路径
3. 在入口 CSS 引入 Tailwind 入口指令/导入
4. 在页面写入可观察 utility

<div class="flex min-h-screen items-center justify-center bg-slate-100">
  <p class="text-xl font-semibold text-slate-900">库存后台已接入 Tailwind</p>
</div>

5. 运行：

pnpm dev
pnpm build

验收标准

• dev 中背景与居中生效
• 删除 class 后样式消失
• build 成功
• 未扫到的测试类（故意写在不扫描文件）不会出现在产物

故障表

现象	原因	处理
任意 class 无效	未接入或 CSS 入口错误	查入口导入
部分 class 无效	动态字符串拼接	写完整可扫描类名
monorepo 丢样式	content 漏包	补路径
产物巨大	扫描过宽/旧策略	收紧来源

自测题

1. 为什么 class={ 'text-' + color } 危险？

参考答案

构建扫描常基于静态分析，拼接结果可能生成不了对应 CSS。