必须配置PostCSS插件并严格遵循@tailwind与@layer顺序：先@tailwind base再@layer base，先@tailwind components再@layer components；content需为字符串数组且路径准确，theme.extend须完整声明子属性才能被@apply识别。
怎么在现有CSS项目里加Tailwind，又不破坏原有流程
直接往 index.css 顶部加 @tailwind base 不行——PostCSS 不会自动识别，编译时会报 Unknown rule @tailwind。必须让 PostCSS 知道 Tailwind 是个插件，且得在解析阶段就介入。
- 确认已安装
tailwindcss和postcss（v8+），autoprefixer建议一并装上 - 运行
npx tailwindcss init -p生成tailwind.config.js和postcss.config.js；如果已有postcss.config.js，手动加tailwindcss()到plugins数组里 -
tailwind.config.js中的content字段必须填真实路径，比如["./src/**/*.{js,jsx,ts,tsx}"]，漏掉会导致类名被 PurgeCSS 干掉 - 旧项目若用 Webpack，注意检查
css-loader是否启用了importLoaders: 1，否则 PostCSS 配置可能被跳过
为什么 @layer 写在 @tailwind utilities 后面才生效
Tailwind 的 @tailwind 指令不是简单插入 CSS，而是触发内部样式生成逻辑：base → components → utilities 分三批注入。你自定义的 @layer components 必须放在对应 @tailwind components 的位置之后，否则会被覆盖或忽略。
- 错误写法：
@layer components { .btn { @apply py-2 px-4; } } @tailwind components;→ 类不会生成 - 正确顺序：先
@tailwind base，再@layer base { ... }；先@tailwind components，再@layer components { ... } - 所有
@layer块必须紧跟在对应@tailwind指令之后，中间不能穿插普通 CSS 规则
purge 已废弃，但 content 配错照样丢样式
v3 之后 purge 字段彻底移除，全靠 content 数组告诉 Tailwind “哪些文件里可能出现 class 名”。写错路径、用错 glob 模式、或者漏掉 JSX/TSX 文件，结果就是开发时有样式，构建后按钮突然没 padding。
- 路径必须是字符串数组，不能是单个字符串；
content: "./src/**/*.tsx"❌，要写成content: ["./src/**/*.tsx"] - Vue 项目记得加
.vue，Svelte 加.svelte，否则模板里的class="mt-4"直接消失 - 用 Vite 或 Next.js 等框架时，
content路径是相对于项目根目录，不是tailwind.config.js所在目录 - 开发中想临时禁用 Purge，可设
content: []，但别提交——体积会暴涨
自定义颜色/间距后，@apply 用不了新值？
@apply 只能调用 Tailwind 内置生成的工具类，它不读取 theme.extend 里的原始配置值。比如你加了 coolblue: "#1e40af" 到 theme.extend.colors，但 @apply text-coolblue 会报错，因为没有生成 text-coolblue 这个类。
- 解决办法只有两个：一是用
theme.extend.textColor显式扩展，让 Tailwind 生成对应类；二是改用内联color: #1e40af或 CSS 变量 -
spacing同理：只扩theme.extend.spacing不够，得同步扩theme.extend.margin、theme.extend.padding等，否则@apply m-cool无效 - 最省事的路：所有扩展都走
theme.extend下的完整路径，别图省事只写一级
Tailwind 的“配置即代码”特性很干脆，但所有隐式依赖都压在 content 路径、@layer 顺序、theme.extend 完整性这三处——少对一个，样式就断一根线，而且往往不报错，只静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
