Tailwind 4 的 @theme 是设计 token 的最佳归宿

Token 即变量

设计规范里定义的色值、字号、圆角，最怕的就是落地时走样。Tailwind 4 的 @theme 让 token 同时拥有CSS 变量和 utility class 两个身份。

配合 @custom-variant dark 可以做 class 驱动的暗色模式。

流体字号

--text-hero: clamp(42px, calc(42px + (100vw - 320px) / 1120 * 30), 72px);

一行解决移动端到桌面端的字号插值，再也不用写七段响应式工具类。

小结

规范文档、CSS 变量、utility 三者保持单一来源，是这套方案最大的价值。