Tailwind CSS v4.5 实用技巧

Tailwind CSS v4.x 系列持续更新，带来了许多提升开发效率的功能。

自定义动画

在 CSS 中直接用 @theme 定义：

@theme {
  --animate-slide-up: slide-up 0.3s ease-out;
}
@keyframes slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

<div class="animate-slide-up">内容</div>

容器查询

Tailwind v4.5 原生支持容器查询：

<div class="@container">
  <div class="@max-md:flex-col @min-md:flex-row">
    <div class="@min-md:w-1/3">侧边栏</div>
    <div class="@min-md:w-2/3">主内容</div>
  </div>
</div>

实用组合

<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 transition-transform
               disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-blue-400">
  提交
</button>

Tailwind 在 2026 年依然是 CSS 框架的首选，v4.5 的容器查询支持让响应式开发更加灵活。