必须保留 tailwind.config.js 并配置 content 字段，否则构建后 dark:、hover: 等类丢失；v4 的“零配置”仅指主题和插件声明移至 css，content 仍为 jit 扫描必需。
选 v4，但别直接删配置文件就跑——tailwind.config.js 必须留着，哪怕只写 content 字段；否则开发时看着正常，构建后 dark:、hover: 类全丢，还不报错。
为什么 tailwind.config.js 不能删，哪怕 v4 说“零配置”
v4 的“零配置”是指主题、插件、断点这些不再靠 JS 配置驱动，而是挪到 CSS 里用 @theme、@plugin 声明。但它仍依赖 content 字段告诉引擎去哪扫描类名。漏掉这个，JIT 就不知道你写了 dark:bg-gray-900 或 md:grid，结果就是：热更新能刷，生产包里没对应 CSS。
- 常见错误现象：
tailwind.config.js被删或留空，本地改hover:underline看得见效果，build 后失效 - Vite 用户虽有自动探测（查
./src/**/*.{js,jsx,ts,tsx}），但若项目含.astro、.svelte、服务端拼接字符串（如className={base + ' ' + variant}），必须显式列进content -
content路径格式和 v3 一致，比如["./src/**/*.{js,jsx,ts,tsx}", "./public/*.html"]，不用改
@tailwind base/components/utilities 全部失效，替换成什么
v4 的 Oxide 引擎压根不识别这三行指令。它们不会报错，但会静默跳过——@tailwind base 没了，* 和 box-sizing 重置全丢，页面排版直接崩。
- 必须删掉所有
@tailwind指令，包括注释里的残留 - 在主 CSS 入口（如
src/index.css）顶部，只留一行：@import "tailwindcss";（分号不能省） - 这行必须放在最顶上，不能被
@layer包裹，也不能在@layer base之后；否则插件或自定义 reset 可能拿不到基础层
dark: 变体为什么突然不生效
v4 移除了内置 darkMode: 'class' 支持。不是“不工作”，是根本没生成 CSS——dark:bg-black 这种类在构建产物里压根不存在。
- 必须在 CSS 文件里
@import "tailwindcss";后加一行：@custom-variant dark (&:where(.dark, .dark *)); - 不要写
@custom-variant dark (&.dark)——缺:where()会导致选择器权重爆炸，.dark .card会覆盖你写的bg-white，调试时极难定位 - HTML 根元素仍需有
class="dark"，和 v3 一样；但切换逻辑必须用document.documentElement.classList.toggle('dark')，body上操作无效
插件和颜色怎么迁，最容易卡住的两个点
v4 插件系统彻底重写，旧版 plugins: [require('@tailwindcss/forms')] 在 JS 配置中完全无效；颜色也不再接受 HEX/RGB，必须用 OKLCH 格式声明。
- 插件必须用
@plugin "@tailwindcss/forms"写在 CSS 文件里，且版本要对齐（如@tailwindcss/forms@v4.x）；npm 升级了tailwindcss却没升级插件，就会 silent no-op - 自定义颜色必须写成
@theme { --color-primary-500: oklch(65% 0.25 270); }，不能写#3b82f6；否则primary-400/primary-600这类推导色全丢 -
@theme块支持运行时改值：document.documentElement.style.setProperty('--color-primary-500', 'oklch(50% 0.3 300)')，但前提是初始声明用了 OKLCH
最易忽略的是：v4 默认输出原生 CSS 特性（:has()、嵌套语法、OKLCH），不降级。安卓 WebView 或老版 Safari 可能直接不渲染——上线前必须实机测，不能只信本地 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
