生产环境必须走构建流程而非cdn，因cdn版体积超2mb、无jit、无前缀补全、无法purgecss；需启用jit、精确配置content路径、白名单动态类名、禁用冗余插件、生产加--minify并设node_env=production。
生产环境直接用 cdn.tailwindcss.com 会触发警告，且实际性能极差——这不是配置问题，而是架构错配。必须走构建流程，否则体积、兼容性、Tree Shaking 全部失效。
为什么 CDN 在生产环境必然失败
CDN 版本本质是预编译的全量 CSS，不参与项目构建链路：
- 未压缩版体积超
2MB，gzip 后仍远高于合理阈值（理想应3KB） - 缺失 JIT 模式，所有工具类无差别生成，
bg-red-500和你没用过的bg-emerald-950一起打进包 - 无 CSS 前缀自动补全，
flex、aspect-ratio等在旧浏览器直接失效 - 无法扫描
content路径，也就没法做 PurgeCSS，动态类名（如class={\`text-\${color}-500\`}）更无法白名单兜底
构建流程中必须启用 JIT 模式
v3.4+ 默认启用 JIT，但很多项目因残留配置或路径错误导致它根本没跑起来。终端没输出 Using JIT (Just-In-Time) mode 就等于没开。
- 删掉
tailwind.config.js中所有mode: 'jit'、purge字段——v3+ 已废弃 -
content必须是数组，且精确覆盖所有模板/组件文件：["./src/**/*.{js,jsx,ts,tsx,vue}"]，漏一个后缀就漏扫一类类名 - 避免宽泛路径：
./**/*.js会误扫node_modules，拖慢监听甚至崩溃 - 动态类名必须显式声明或白名单：
safelist: [/^bg-/, /^text-/]，但优先改写为条件对象，例如{'text-sm': size === 'sm'}
精简输出体积的硬核操作
光靠 JIT 不够，得主动干预生成逻辑：
- 禁用不用的核心插件：
corePlugins: { float: false, objectFit: false }，这些在现代布局中基本已淘汰 - 收缩变体范围：
variants: { backgroundColor: ['hover', 'focus'] }，别让disabled或group-hover无差别生成 - 按需导入基础层：
@tailwind base可保留，但@tailwind components若不用自定义组件，整行可删 - 确保
postcss.config.js中tailwindcss是第一个插件，Next.js 项目建议直接删掉该文件，用默认配置
构建命令与环境变量不能错
开发和生产必须走不同命令，且环境变量要显式透传：
- 开发：用
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，依赖 JIT 实时增量编译 - 生产：必须加
--minify，且启动前设NODE_ENV=production，否则 JIT 的安全策略（如safelist生效逻辑）不会触发 - Vite 或 Next.js 用户注意：自定义脚本里容易覆盖
NODE_ENV，加TAILWIND_MODE=build更保险
真正卡住 Tailwind 生产性能的，往往不是配置项本身，而是构建链路中某个环节“假装在工作”——比如终端没打印 JIT 提示、content 路径漏掉一个 .vue、或者 postcss.config.js 把 Tailwind 插件挤到了第二位。这些地方不校验，优化就全在原地打转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
