Tailwind CSS v4 实战技巧

Tailwind CSS v4 采用了全新的引擎，带来了更好的性能和更灵活的配置。

新特性

• 使用 CSS 原生变量而非配置对象
• 更智能的 JIT 编译
• 更小的打包体积

示例

<div class="flex gap-4 p-6 rounded-2xl shadow-lg bg-gradient-to-br from-indigo-500 to-purple-600">
  <h2 class="text-white text-lg font-bold">Hello World</h2>
</div>

通过 @theme 指令可以轻松扩展设计系统。