按需加载 tailwind css 的本质是构建时静态分析 content 路径下源码并仅打包实际使用的类名；content 必须显式声明所有含 classname 的文件扩展名与真实路径，漏配将导致生产环境样式丢失。
按需加载 Tailwind CSS 的本质，是让构建过程只打包你代码里真正用到的类名——不是“运行时加载某个 CSS 文件”，而是构建时静态分析 + 精准扫描。开发时样式全量可用，build 后却白屏或部分失效，90% 是 content 配置没对上，不是插件没装或命令没跑。
content 路径必须显式写全扩展名和 HTML 文件
Tailwind 的 JIT 模式靠 content 字段去文件系统里挨个读源码，它不猜、不推断、不解析别名。漏一个扩展名，对应文件里的类名就进不了最终 CSS。
-
"./src/**/*"❌ —— Vite 或 PostCSS 插件根本不会打开.jsx或.tsx文件，类名直接被 purge -
"./src/**/*.{js,jsx,ts,tsx}"✅ —— 显式声明所有可能含className的 JS/TS 变体 -
"./public/index.html"✅ —— 如果你在index.html里写了class="bg-gray-100"（比如 SSR landing page），不加这行，HTML 中的类也会丢 - 用了
@/components别名？content里不能写"@/components/**/*"—— 插件不解析别名，得写真实路径如"./src/components/**/*.{js,jsx,ts,tsx}"
Vite 和 CRA 必须走不同配置路径
不是“装了 tailwindcss 就能用”，构建工具链决定你该用哪套机制。混搭会导致插件不生效、双重处理或热更新异常。
- Vite 项目（
npm create vite@latest创建）：装tailwindcss+@tailwindcss/vite，在vite.config.ts里加tailwindcss()插件，不要配postcss.config.js - CRA 或 Webpack 项目（
npx create-react-app）：装tailwindcss+postcss+autoprefixer，配postcss.config.cjs，@tailwindcss/vite完全无效，装了也白装 - Next.js 13+（App Router）：走 PostCSS 流程，但
content必须包含app/**/*.{js,jsx,ts,tsx}，否则路由组件里的类名扫不到
动态 class 名必须显式声明或进 safelist
Tailwind 的 purging 是静态分析，它不执行 JS，所以任何运行时拼接的字符串都会被跳过。
-
className={`text-${color}-500`}❌ ——color是变量，插件扫不到完整类名text-red-500或text-blue-500 -
className={isActive ? 'bg-blue-500' : 'bg-gray-200'}✅ —— 两种完整类名都硬编码在源码中，能被识别 -
className={clsx('p-4', isPrimary && 'bg-blue-500')}⚠️ ——clsx大多数情况可识别，但自定义工具函数或嵌套三元可能失效 - 补救方式：在任意 JSX 注释里写一次完整类名（如
{/* text-red-500 text-blue-500 */}），或在tailwind.config.js的safelist里声明正则：[/^text-(red|blue)-500$/]
@tailwind 指令顺序和位置不能错
这不是语法糖，是 Tailwind 构建流程的锚点。顺序错、位置错、写成 @import，都会导致 base 重置失效或 utilities 覆盖不生效。
- 必须写在主 CSS 文件（如
src/index.css）最顶部，顶格、无空行、无缩进 - 顺序固定：
@tailwind base;→@tailwind components;→@tailwind utilities;，调换会破坏层叠优先级 - 不能写成
@import 'tailwindcss/base'—— 这是 v2 旧写法，v3+ 已废弃，Vite/CRA 都不认，会静默忽略或报Unknown at rule @import - VS Code 报红？装
Tailwind CSS IntelliSense插件即可，不影响实际构建
最容易被忽略的是：JIT 模式下，content 不只是“告诉 Tailwind 去哪找”，它直接决定哪些文件参与 AST 解析。哪怕只漏一个 .mdx 或 .html，那个文件里写的 className 就永远进不了生产 CSS —— 开发时看着好好的，build 后就突然没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
