[!info] related notes

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

安装 Tailwind 并写第一组工具类

目标

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

这个场景为什么出现

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

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

前置

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

Tailwind v4 + Vite

在应用包目录安装：

pnpm add -D tailwindcss @tailwindcss/vite

在已有 Vite 配置中添加插件，保留原有框架插件、别名等配置：

import tailwindcss from '@tailwindcss/vite'
// 在现有 plugins 数组中加入 tailwindcss()

在应用入口 CSS 中加入，并确认应用入口导入了这份 CSS：

@import "tailwindcss";

v4 自动检测源文件中的完整类名；跨包源码或被默认忽略的来源可用 @source 显式注册，路径相对于这份 CSS。构建工作目录影响默认扫描起点，可用导入中的 source(...) 指定基准。具体目录示例见 Monorepo 配置记录。

旧 v3 项目采用 tailwind.config.* 的 content（如 ./index.html、./src/**/*.{js,ts,jsx,tsx,vue}）及 @tailwind base/components/utilities 指令；不要把它当作 v4 新项目的必需步骤。

在页面写入可观察的工具类：

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

若项目 scripts 已定义 dev 和 build，运行：

pnpm dev
pnpm build

验收标准

• dev 中背景与居中生效
• 删除元素上的 class 后，该元素不再匹配对应规则；只有其他扫描来源也不再引用该类，重新构建后才应检查其生成规则是否消失
• build 成功
• 仅在未扫描文件出现、且未被其他来源或显式规则引入的测试类，不会生成 utility

故障表

现象	原因	处理
任意 class 无效	未接入或 CSS 入口错误	查入口导入
部分 class 无效	动态字符串拼接	写完整可扫描类名
monorepo 丢样式	源文件未覆盖	v4 检查 @source；v3 检查 content
产物巨大	扫描过宽/旧策略	收紧来源

自测题

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

参考答案

Tailwind 将源文件作为文本检测完整类名，不执行 JavaScript 字符串拼接。使用包含完整类名的映射，例如 { error: "text-red-600", ok: "text-green-600" }。

参考

• Tailwind v4 Vite 安装
• 源文件检测