cdn版tailwind在生产环境不可用，因其不扫描源码、仅含3200个静态类、不支持变体/动态类/自定义配置，导致样式失效、体积超3mb、首屏严重阻塞；必须通过postcss+tailwind cli构建，精准配置content路径并启用jit。
CDN版Tailwind CSS在生产环境不能用，不是“不推荐”，而是根本达不到可用标准——它既不生效，也不安全，更拖慢页面。
CDN版Tailwind根本不会扫描你的HTML/JSX类名
Tailwind v3+ 的核心逻辑是：构建时读取 content 配置路径下的源码文件（如 ./src/**/*.tsx），提取所有出现过的类名字符串，再生成对应CSS。CDN版（https://cdn.tailwindcss.com）没有这一步，它只硬编码了约3200个高频静态类（比如 text-red-500、flex），且不支持任何变体前缀（md:flex、hover:bg-blue-600）或任意值语法（m-[3.5rem]）。
常见翻车现象：
- 写了
lg:grid-cols-3，但响应式栅格没生效 - 用了
dark:bg-slate-800，暗色模式样式完全缺失 - 动态拼接类名：
className={`text-${size}-500`}→ 构建期无法静态分析 → CDN里压根没这条规则
CDN加载的是全量未裁剪的CSS，体积常超3MB
CDN返回的CSS包含全部断点、全部颜色、全部间距、全部状态变体，gzip后仍常达700KB–1.2MB。而正确配置 content 后的构建产物，生产环境通常只有12KB–48KB。
影响直接体现在LCP和FCP上：
- 浏览器必须下载并解析整份巨量CSS才能开始渲染，首屏阻塞严重
- CDN缓存再快，也救不了“下载1MB垃圾CSS”的事实
- 移动端3G网络下，多花800ms以上等待样式就绪
CDN绕过tailwind.config.js，主题/插件/自定义变体全部失效
tailwind.config.js 里的 theme、plugins、safelist、variants 全部依赖构建时注入。CDN运行时既不读取该文件，也不执行PostCSS流程。
典型失效场景：
- 自定义颜色
brand-blue: "#2563eb"写进config → HTML里用bg-brand-blue→ 浏览器里查不到该规则 - 装了
@tailwindcss/forms插件 →<input type="checkbox" class="checkbox">→ 样式空白 - 写了
@layer components { .btn { @apply px-4 py-2 rounded; } }→ CSS文件里没这段，HTML里也没对应类名 → 彻底丢失
本地构建只需5分钟，比修CDN问题还快
不需要Vite/Webpack，只要Node环境：
- 运行
npm install -D tailwindcss postcss autoprefixer - 执行
npx tailwindcss init -p生成配置 - 把
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构建
真正容易被忽略的点：动态类名必须显式出现在可扫描文件中，或者加进 safelist；@apply 只能用在JSX/HTML里声明过的类组合，不能替代真实类名书写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
