精华 全栈开发
Tailwind CSS v4 升级避坑指南：@theme 与 unlayered 优先级变化分析
最近把几个项目的样式库升级到了 Tailwind CSS v4，发现底层逻辑有了相当大的革新。
核心变化总结
- 无需 tailwind.config.js：直接使用 CSS-first 的配置方式，通过
@theme定义颜色和间距。 - 极速编译：结合 Vite 插件
@tailwindcss/vite，冷启动与 HMR 速度提升了一个数量级。 - 优先级变化（重点避坑！）：
- Tailwind 4 的 utilities 均在
@layer utilities； - 未使用 CSS layer 的三方组件库（如 Element Plus）属于 unlayered；
- 规则：unlayered 声明永远高于任何 layer！如果想覆盖组件库样式，必须使用
class="h-8!"尾部感叹号语法。
- Tailwind 4 的 utilities 均在
踩过坑的同学举个手，你们觉得 v4 的开发体验如何？
