· 5 min read
Tailwind v4 重新设计 CSS 入口,几条新指令各司其职,不再像 v3 那样靠 @tailwind 堆叠。
- @import "tailwindcss":替代 v3 的三条
@tailwind,整合 base + utilities - @theme:设计 token 入口,颜色字号间距都在这定义
- @utility:自定义工具类,替代 v3 的
@layer写法 - @variant:自定义变体(hover / focus / ...),替代 v3 的 JS 配置
- 级联顺序:v4 只剩
base → utilities两层
核心:@theme 把设计 token 从 JS 搬到 CSS,样式与变量同源。