Tailwind CSS 实用技巧总结

使用 Tailwind CSS 一段时间后，总结一些实用技巧。

1. 善用 @apply 提取重复样式

.btn-primary {
  @apply bg-primary text-white px-4 py-2 rounded-lg;
  @apply hover:bg-primary/90 transition-colors;
}

2. 响应式设计

Tailwind 的响应式前缀非常直观：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 自动响应式网格 -->
</div>

3. 暗色模式

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  自动适配暗色模式
</div>

4. 任意值语法

当预设值不够用时：

<div class="w-[280px] h-[calc(100vh-64px)]">
  使用任意值
</div>

5. 组合变体

<button class="hover:scale-105 active:scale-95 transition-transform">
  交互动效
</button>

Tailwind 的哲学是"约束即自由"——在限制中获得效率。