Tailwind 必须通过构建流程配置，CDN 方式仅支持极小范围变体且不生效于 JIT、Purge 等核心能力；唯一合法配置入口是 tailwind.config.js，需用 npx tailwindcss init 初始化，并确保 content 包含 HTML 路径，修改后必须重新运行构建命令。
CDN 方式无法真正配置 Tailwind，所有自定义（颜色、断点、变体、任意值）都必须走构建流程。 你看到的 tailwindcss.config = { ... } 是 CDN 的临时 hack，只支持极小范围的变体启用，且不生效于 JIT、Purge、主题扩展等核心能力。
tailwind.config.js 文件必须存在且被正确引用
构建流程启动前，tailwind.config.js 是唯一合法配置入口。它不是“可选”，而是 CSS 生成的源头。没有它，npx tailwindcss -i ./src/input.css -o ./dist/output.css 会用默认配置硬编译，你加的 extend.colors 或 theme.screens 全部忽略。
- 初始化命令是
npx tailwindcss init，不是npm init tailwindcss（后者是旧版或混淆写法） - 确保
content字段包含你的 HTML 文件路径，例如content: ["./src/**/*.html"]，否则自定义类（如@layer components）不会被扫描到，打包后直接消失 - 改完配置后必须重新运行构建命令，CDN 不会自动响应文件变化
颜色、间距、字体这些基础扩展必须写在 theme.extend 里
Tailwind 默认只生成预设值（如 blue-500、space-y-4），想加 brand-blue 或 mt-18，不能靠猜 class 名，也不能靠 CDN 配置对象。
- 正确写法是：
module.exports = { theme: { extend: { colors: { brand: '#1e3a8a', }, spacing: { '18': '4.5rem', }, fontSize: { 'xs': '0.75rem', '2xl': '1.5rem', } } } } - 错误做法：在 HTML 里写
text-[#1e3a8a]就以为能替代配置——它依赖 JIT 模式且只对静态字符串有效；JS 动态拼接class="text-[${color}]"会完全失效 - 加了非标值（如
'7': '1.75rem'）会导致所有带7的工具类（mt-7、p-7、gap-7）全部打进 CSS，体积不可控
响应式断点和变体（hover / focus / dark）要按需开启
默认只启用 hover 和 focus 在 backgroundColor、borderColor 等少数属性上。像 md:scale-105、dark:shadow-lg 这类组合，必须显式声明。
立即学习“前端免费学习笔记（深入）”；
- 新版（v3.0+）不再需要
variants字段，统一用plugins或corePlugins控制；但hover、focus-within、group-hover等仍需在corePlugins中设为true - 自定义断点写在
theme.extend.screens，例如：screens: { 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', 'print': { 'raw': 'print' }, }注意：HTML 中写的md:text-xl必须和这里定义的md完全一致，大小写、冒号位置都不能错 -
dark:前缀生效前提是标签上有dark类，且你在tailwind.config.js中启用了darkMode: 'class'（默认是'media'）
生产环境禁用 CDN，JIT 编译必须开启 content 扫描
CDN 版本体积大（>3MB）、无 Purge、不支持 @layer、无法解析任意值语法，上线即踩坑。真正可控的配置，只存在于构建产物中。
- JIT 模式（v3.0+ 默认）会根据
content字段扫描所有匹配文件中的 class 字符串，动态生成所需 CSS —— 所以你 HTML 里没出现hover:from-red-500，它就不会被打包 - 常见漏配：
content路径写成["./src/**/*.{js,ts,jsx,tsx}"]却忘了加.html，结果自定义组件类名全丢失 - 执行构建后检查输出 CSS 文件大小，如果 >200KB，大概率是
content范围过大或extend加了太多非标值
最常被跳过的动作：改完 tailwind.config.js 后没重跑构建，就去浏览器里刷新——它根本不知道你改了什么。配置不是热更新的，它是编译时决定 CSS 输出的开关。
