tailwind css v4迁移需精简tailwind.config.js仅保留content字段，用@import "tailwindcss"替代三行@tailwind指令，dark模式须手动声明@custom-variant，插件改用@plugin导入且须v4兼容版。
tailwind.config.js 里还留着 theme 或 plugins 就等于没配
Oxide 引擎直接忽略 theme、plugins、darkMode 这些字段，删不干净会导致你反复改配置却毫无效果。常见现象是：改了 colors.brand，bg-brand-500 死活不生成；或者装了 @tailwindcss/forms，表单样式就是不生效。
必须只保留 content 字段，格式和 v3 一致，例如：["./src/**/*.{js,jsx,ts,tsx}"]。其他所有字段——哪怕注释掉——都得删。Vite 用户可能觉得能省略，但一旦项目含 .astro、.svelte 或服务端拼接类名（如 className={base + ' ' + variant}），漏写 content 就会静默漏类。
@tailwind base/components/utilities 还在 CSS 里就必然丢样式
v4 的 Oxide 引擎根本不识别这三行指令，也不会报错，而是直接跳过。结果是 preflight 重置（*、box-sizing）全丢，页面排版瞬间崩坏，且 DevTools 里查不到任何异常。
必须做两件事：
- 删掉所有
@tailwind行，包括注释里的残留 - 替换成单行
@import "tailwindcss";，放在 CSS 入口文件（如src/index.css）最顶部，不能包在@layer里，也不能在@plugin后面
dark: 变体失效却不报错，根源在 @custom-variant 缺失
v4 彻底移除了内置的 darkMode: 'class' 支持。如果你还留着 class="dark" 在 上，但没声明 @custom-variant，那所有 dark:bg-black 类都会被 JIT 引擎当普通字符串忽略——构建成功，开发时看着有，上线后全白。
正确写法是在 @import "tailwindcss"; 后加一行：
@custom-variant dark (&:where(.dark, .dark *));
注意：&.dark 是错的，缺少 :where() 会导致选择器权重爆炸，后续自定义样式极易被覆盖，调试时根本看不出哪条规则赢了。
@plugin 导入插件必须用 v4 兼容版，且不能写在 JS 配置里
v4 插件系统彻底重写，plugins: [require('@tailwindcss/forms')] 这种写法在 tailwind.config.js 中完全无效，连警告都不会出。必须用 @plugin 指令写进 CSS 文件，并确保 npm 安装的是 v4 版本（如 @tailwindcss/forms@^4.0.0）。
典型错误：
- 升级了
tailwindcss却忘了升级插件，@plugin "@tailwindcss/forms"报 “plugin not found” - 把
@plugin写在@import "tailwindcss";前面，导致插件拿不到基础层，form-control类压根不生成
主题变量、断点、颜色这些也都得挪到 CSS 里用 @theme 声明，JS 配置不再参与样式生成逻辑——这点最容易被当成“配置迁移完成”，其实只是刚拆完第一块砖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
