Tailwind CSS v4 的重大语法变化是配置逻辑重构：用 @import 'tailwindcss'; 替代所有 @tailwind 指令，@theme/@config 取代 JS 配置，@layer 控制层叠顺序；不遵循则类名静默失效且无报错。
Tailwind CSS v4 的“重大语法变化”不是加了几个新 class，而是整个配置和样式生成逻辑被重写——@import "tailwindcss" 替代所有 @tailwind 指令，@theme 和 @config 取代 tailwind.config.js 中的 theme 配置，@layer 成为样式优先级的唯一可控手段。不按这套规则写，类名会静默失效，且无报错。
必须用 @import "tailwindcss"，否则基础样式全丢
v4 的 Oxide 引擎只识别这一条语句作为入口，不再解析 @tailwind base、@tailwind components 或 @tailwind utilities。哪怕只留一条 @tailwind 指令，整段 CSS 都会被跳过。
-
@import "tailwindcss"必须写在 CSS 文件最顶部，不能包裹在@layer里，也不能后面跟注释 - 必须用单引号 + 末尾分号：
@import 'tailwindcss';，双引号或漏分号都会导致引擎静默忽略 - 如果项目还残留
postcss.config.js里配了tailwindcss()插件，要彻底删掉——v4 的 Vite 或 PostCSS 插件已内置全部逻辑 - 旧项目迁移时，常见现象是页面没了
box-sizing: border-box、文字默认大小异常、flex 不生效，根本原因就是这条@import没写对或被覆盖
@theme 和 @config 必须写在 CSS 里，JS 配置不再驱动工具类生成
v4 的主题变量（颜色、字体、间距）必须通过 CSS 自定义属性声明，Oxide 引擎只扫描这些规则来生成对应工具类。你在 tailwind.config.js 里写的 theme.extend.colors 完全无效。
-
@theme块中变量名必须带标准前缀：--color-primary✅，--primary❌，--my-color❌ -
@theme必须出现在@import 'tailwindcss';之后，且不能跨文件；src/components/Button.css里的@theme不会影响src/layout/Header.css -
@config只接受静态值，不能引用 CSS 变量、不能拼字符串、不能调函数；只支持theme.colors、theme.spacing等有限键，不支持plugins或content - 如果你删了
tailwind.config.js却没补@theme，bg-primary、text-brand-500这类类名就根本不会生成
@layer 是唯一可控的层叠顺序机制，顺序错位直接导致样式覆盖失效
v4 默认启用真实 CSS 层叠层，不再靠 class 名字长度或 specificity “猜”谁赢。但你必须显式声明 @layer base, components, utilities，否则自定义规则不进对应层。
立即学习“前端免费学习笔记（深入）”；
-
@layer声明必须出现在所有规则之前，且同一文件只能出现一次；嵌套写法（比如在@layer components里再写@layer utilities）不合法 - 不同
@layer之间按声明顺序决定优先级：@layer base最低，@layer utilities最高；同一层内仍按源码顺序覆盖 - 第三方插件（如
@headlessui/react）生成的 utility 类可能落在@layer utilities，但如果你在@layer base里写了.btn { @apply px-4 }，它会被px-4覆盖——因为@apply实际展开后也属于utilities层 - 老项目迁移时，大量
@apply和插件类混用，最容易踩的坑是：本想让按钮基类稳定，结果被某处md:px-6意外覆盖，查半天发现是层叠顺序没对齐
:has() 支持带来状态穿透能力，但浏览器兼容性和性能要手动兜底
v4 原生支持 :has()，你可以直接写 .card:has(.card__image) 控制父容器样式，无需 JS 或额外 class。但它不是“开箱即用”，得自己判断场景和边界。
-
:has()在 Safari 16.4+、Chrome 120+、Firefox 128+ 才稳定；低于这些版本会静默忽略整条规则，不 fallback - 不能嵌套：
:has(:has(...))语法非法；也不能在伪元素里用，比如::before:has(...)不支持 - 性能敏感：避免
:has(div div a)这类宽泛匹配；优先用具体 class 限定范围，比如:has(> .nav-item.active) - 典型误用：表单验证写成
.form-group:has(input:invalid)，结果在 Safari 16.3 下整个组样式消失，且控制台无提示
最易被忽略的是作用域隔离——@theme、@layer、@config 全部按文件作用域生效，没有“全局配置”这回事。你以为在 index.css 里配好了主题，结果 Modal.css 里用 bg-primary 报错，八成是因为它压根没 import 那个 @theme 文件。
