v4 中 @tailwind 指令失效，须替换为 @import "tailwindcss"; 删除 postcss.config.js 中的 tailwindcss() 插件；content 字段废弃，改用 @source 声明路径；theme.extend 失效，改用 @theme 定义自定义主题。
@tailwind指令完全失效，不报错但样式静默丢失
这是最危险的破坏点：v4 的 Oxide 引擎根本不解析 @tailwind base、@tailwind components、@tailwind utilities。它们被当作普通注释跳过，导致 preflight 重置、表单默认样式、所有工具类全都不生成。
常见现象包括首页白屏、text-xl 和 hover:bg-blue-500 完全不生效、暗色模式开关无反应——构建成功，但页面“看起来像没加载 CSS”。
- 必须删掉所有 CSS/SCSS 入口文件（如
src/styles/main.css）里的三行@tailwind指令 - 替换成单行：
@import "tailwindcss"; - 若用了
@layer，必须写在这行@import之后，否则整个 layer 被忽略
postcss.config.js 中的 tailwindcss() 插件必须移除
v4 默认走 Lightning CSS 流程，不再经过 PostCSS 插件链。如果 postcss.config.js 里还留着 tailwindcss()，会和 Vite / Angular / Webpack 的内置处理冲突，造成样式被跳过、重复编译，甚至部分类名生成两次又删掉。
- Vite 用户：卸载
tailwindcss的 PostCSS 插件，改用@tailwindcss/vite - Angular 用户：检查
angular.json是否手动启用了 PostCSS；如有，应禁用或确认使用的是@tailwindcss/postcss - Webpack 用户：确保
postcss.config.js中只保留autoprefixer（可选），彻底删除tailwindcss()
tailwind.config.js 的 content 字段被忽略，@source 取代扫描逻辑
v4 的“零配置”依赖构建工具对 ESM 模块图的劫持能力，content 字段已废弃。继续留在配置里不会报错，但完全不起作用；漏配路径则对应文件中所有 Tailwind 类名都缺失。
- 删掉
tailwind.config.js中的content字段（不是注释，是直接删除） - 改用 CSS 内的
@source规则显式声明路径，例如：@source "./src/**/*.{js,jsx,ts,tsx}"; - 字符串拼接类名（如
className={`bg-${color}-500`}）、.astro、.svelte、require.context等动态场景，v4 无法推断，必须手动列进@source
theme.extend 失效，自定义主题必须用 @theme CSS 规则
v4 彻底移除了 JS 配置驱动的主题扩展机制。theme.extend 不再被识别，旧配置中的颜色、间距、字体等自定义项全部失效，且不会警告。
- 原
tailwind.config.js中的extend: { colors: { primary: '#3b82f6' } }必须迁移到 CSS 文件中 - 写法为：
@theme { --color-primary-500: #3b82f6; --color-primary-600: #2563eb; } - OKLCH 色彩空间启用后，仍用
rgb()或hsl()定义的颜色可能渲染偏色，建议直接使用 OKLCH 值或通过变量间接控制
真正麻烦的不是改几行代码，而是所有失效都静默发生——没有错误提示，只有运行时样式消失。尤其当项目含大量动态类名、非标准模板或自定义 PostCSS 插件时，漏掉一个 @source 或残留一个 @tailwind，就可能导致某类页面整页样式崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
