Tailwind CSS v4纯CSS解耦架构可行，但必须用@config/@theme替代JS配置，@layer声明层叠边界，darkMode和:has()需手动适配且注意浏览器兼容性。
纯 CSS 实现完全解耦的架构设计，在 Tailwind CSS v4 中是可行的，但前提是放弃把配置塞进 tailwind.config.js 的旧习惯——v4 的 CSS-first 架构要求你把主题、变体、层叠逻辑全部收束到 CSS 文件里，否则所谓“解耦”只是假象。
必须用 @config 和 @theme 替代 JS 配置文件
v4 不再扫描 tailwind.config.js，删掉它后若颜色、断点或 spacing 不生效，不是引擎坏了，是你没在 CSS 里补上等效声明。
-
@config必须出现在@import 'tailwindcss';之前，且只能写一次；顺序错等于没写 - 只支持静态值：
colors、spacing、fontSize、borderRadius等基础键，不支持plugins或content - 写法要严格：结尾必须有分号，对象内不能有函数、CSS 变量或字符串拼接，例如
@config { theme: { colors: { primary: '#3b82f6' } }; } - 作用域仅限当前 CSS 文件，不会污染全局，适合多主题并存场景（如 admin vs dashboard 入口各自独立配置）
@layer 是解耦的物理边界，不是可选项
不用 @layer 就谈不上解耦——所有自定义样式都会混进 utilities 层，和工具类平级竞争，最终靠源码顺序或 specificity “赌赢”，这和解耦背道而驰。
-
@layer base用于重置或全局约束（如* { box-sizing: border-box }），必须放在最前 -
@layer components封装语义化组件类（如.card、.btn），内部用@apply组合工具类，禁止直接写 utility class 到 HTML -
@layer utilities提炼原子操作（如.sr-only、.visually-hidden），确保和框架原生 utilities 同层、同优先级 - 常见错误：把
@layer components写在@import 'tailwindcss';后面，导致规则被忽略；或嵌套在@media里，触发解析失败
darkMode 和 :has() 必须手动声明，无法靠默认行为
v4 不再从 JS 配置读取 darkMode，也不在 @config 里支持它；:has() 虽然开箱即用，但浏览器兼容性极敏感，漏掉检测会静默失效。
立即学习“前端免费学习笔记（深入）”；
- 启用 class-based 暗色模式：在主 CSS 中加
@custom-variant dark(&:is(.dark *));，并确保<html class="dark">或<body class="dark">存在 -
:has()规则必须用具体 class 限定范围，避免:has(ul li a)这类宽泛写法，Chrome 120+/Safari 16.4+/Firefox 128+ 才稳定支持，老版本直接跳过整条规则 - 不能嵌套
:has()，例如:has(:has(...))无效；也不能在@layer外直接写，否则可能被 JIT 编译器忽略 - 如果项目需兼容 Safari 15.x 或 Chrome 105–119，得回退到 JS 控制 class +
data-dark属性方案
VSCode IntelliSense 和构建工具链容易静默失效
这些不是代码问题，而是配置断连——v4 的零配置依赖工具链主动识别 CSS 入口，一旦路径或语法出错，就彻底“失联”，且不报错。
- VSCode 的 Tailwind IntelliSense 默认找
tailwind.config.js，删掉后必须在设置里显式指定"tailwindCSS.experimental.configFile"指向你的主 CSS（如src/styles/main.css） - Vite / Next.js 若未正确识别含
@import 'tailwindcss';的入口 CSS，会跳过整个 Tailwind 处理流程，生成空 CSS 文件 -
@import 'tailwindcss';必须用单引号、末尾加分号、位于文件最顶部（前面只允许空行或/* */注释），写成双引号、漏分号、或包在@layer里，都会让引擎静默跳过 - PostCSS 配置必须用
@tailwindcss/postcss插件，旧版tailwindcss插件不兼容 v4 的 Oxide 引擎
真正难的不是写对某一行 @config，而是接受“CSS 文件本身既是配置、又是样式、还是接口契约”这个事实——任何一处语法偏差，都可能导致整套解耦架构在构建时无声崩塌。
