CSS原子化类库的引入_Tailwind CSS的配置与安装

tailwind.config.js 必须手动创建或通过 npx tailwindcss init -p 生成，否则 class 不生效；content 路径必须准确匹配源文件位置，postcss 为硬依赖且需正确配置插件顺序。

tailwind.config.js 文件必须手动创建

不装 CLI 工具、不运行 npm init -y 或 npx tailwindcss init，tailwind.config.js 就不会凭空出现。很多新手卡在“为什么 class 不生效”，实际是压根没这个配置文件。

• 推荐用 npx tailwindcss init -p 一键生成配置 + postcss.config.js（加 -p 才带 PostCSS 支持）
• 若手动创建，内容至少得有 module.exports = { content: [], theme: {}, plugins: [] }，否则 content 字段缺失会导致扫描不到模板路径，class 全被 PurgeCSS 删光
• content 数组里填的路径必须匹配你真实存放 HTML/JSX 文件的位置，比如 ./src/**/*.{html,js,jsx,ts,tsx}，漏掉扩展名或路径层级错一级，热更新时 class 就突然消失

PostCSS 是硬依赖，不能跳过

Tailwind 本质是 PostCSS 插件，没 PostCSS 环境，@tailwind 指令根本不会被解析——哪怕你写了 @tailwind base，最终 CSS 文件里也只有一行注释。

• 必须安装 postcss 和 autoprefixer： npm install -D postcss autoprefixer
• postcss.config.js 至少含 module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }；顺序不能反，tailwindcss 必须在 autoprefixer 前
• Vite / Next.js 等现代框架虽内置 PostCSS，但默认不启用插件，仍需显式配 postcss.config.js，否则 Tailwind 不工作

build 后 CSS 为空或 class 缺失的典型原因

不是 Tailwind 坏了，大概率是 content 配置或构建流程断在某个环节。常见现象：开发时正常，build 后所有 utility class 全没了。

• content 路径写成相对路径如 src/**/*.html（缺 ./），Node.js 会当模块名去 resolve，直接静默失败
• 用了 Vite，但没在 vite.config.js 中配置 css.postcss，导致 build 阶段跳过了 PostCSS 处理
• 在 CSS 文件里写了 @layer components { .btn { @apply py-2 px-4; } }，但 .btn 在 content 扫描范围内没被引用过，PurgeCSS 会连带删掉整个 @layer 块
• 使用了 TAILWIND_MODE=watch 但没配 content，watch 模式下 Tailwind 只监听配置文件变更，不扫描源码，class 不会动态注入

CDN 引入只能用于原型，别上生产

https://cdn.tailwindcss.com 确实一行 script 就能跑，但它加载的是完整未裁剪版 CSS（~3MB），且不支持自定义 theme、plugins 或 @layer。

立即学习“前端免费学习笔记（深入）”；

• 它自动启用了 JIT 模式，但仅限于内联 style 标签或 class 属性里的字符串——JSX 中变量拼接的 class（如 className={`p-${size}`}）会被忽略
• 无法配合 dark:、hover: 等变体做条件编译，所有变体全量打包
• CDN 版本滞后，新出的 aria- 或 data- 变体可能要等几天才同步，本地 CLI 安装才能即时用上

真正要上线的项目，绕不开 tailwindcss CLI + PostCSS 构建链。那些“不用配置”的爽感，后面都得用调试时间还。