CDN引入Tailwind行不通，因其依赖构建时扫描源码生成原子类，CDN版无此能力，导致类名不生效；必须通过PostCSS+Tailwind CLI构建，精准配置content路径并确保类名可静态分析。
CDN引入Tailwind为什么行不通
Tailwind不是普通CSS库，tailwind.css本身只是个空壳——它不包含任何实际样式，所有原子类（如 text-blue-500、flex-col）都得靠构建时扫描源码生成。CDN上那些“Tailwind CSS”文件，要么是旧版遗留（v2之前），要么是精简演示版，**根本不会响应你写的HTML类名**。
常见错误现象：
– 页面写了 bg-red-500，但背景没变红
– 浏览器开发者工具里搜不到该类名的CSS规则
– @layer 或自定义theme 完全无效
- CDN只适合纯静态、无定制、且类名全部提前写死的极简场景（比如单页宣传页 + 手动列全用到的类）
- 哪怕只加一行
@apply flex gap-2，CDN方案就失效 - v3.0+ 官方明确不提供CDN可用的完整构建版
PostCSS + Tailwind CLI 是最轻量的构建路径
不需要整个Vite或Webpack，只要Node环境，5分钟就能跑起来。核心是让tailwindcss CLI读你的HTML/JSX文件，提取类名，再结合tailwind.config.js生成最终CSS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化：
npm install -D tailwindcss postcss autoprefixer，然后运行npx tailwindcss init -p - 配置
content字段必须精确指向源码路径，比如：content: ["./src/**/*.{html,js,jsx,ts,tsx}"]—— 漏掉.tsx？React组件里的类名就进不了输出 - 在CSS入口文件里写三行：
@tailwind base;@tailwind components;@tailwind utilities;，缺一不可 - 生成命令：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，注意-i是输入（含@tailwind指令的文件），不是tailwind.css
class名字没生效？先查content扫描和purge逻辑
Tailwind默认开启生产模式下的tree-shaking（即purge），它不会把所有类都打包进去，而是只保留content配置里匹配到的类名。这是性能关键，也是90%“类名无效”问题的根源。
典型翻车场景：
- 模板字符串拼接类名：
className={`text-${size}-500`}→ 构建时无法静态分析，该类被直接丢弃 - 动态类名存在条件分支：
className={active ? "bg-blue-500" : "bg-gray-200"}→ 必须确保两种类都在content能扫到的文件中出现过 - 使用了
!important但没开important配置项 → 在tailwind.config.js里加important: true才能用!text-lg - CSS-in-JS库（如Emotion）里写
tw`text-red-500`→ 需额外配content支持JS模板字面量，参考插件tailwindcss-classnames
Vite / Next.js等框架里别手动配PostCSS
这些框架内置了PostCSS支持，但Tailwind插件必须显式加载，否则@tailwind指令不解析，content也不生效。不是装了包就自动工作。
关键动作：
- Vite：在
vite.config.js的plugins数组里加tailwindcss()（需import tailwindcss from 'tailwindcss'） - Next.js：v13+推荐用App Router +
app/globals.css里写@tailwind三行，并确保next.config.js没禁用postcss - 如果用了
cssModules，注意className要写成styles['text-red-500']，不能直接写字符串 —— 否则类名进不了content扫描范围 - 开发时热更新慢？检查
content路径是否包含太多node_modules或build目录，会拖慢扫描速度
真正卡住人的，往往不是怎么装，而是构建链路里哪一层没把类名“告诉”Tailwind —— content配置、模板语法、构建插件加载顺序，这三个点漏一个，就白忙活。
