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 构建链。那些“不用配置”的爽感，后面都得用调试时间还。
