Tailwind CSS 技巧

Tailwind CSS 是一个实用的 CSS 框架，以下是一些实用技巧：

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

@layer components {
  .btn-primary {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700;
  }
}

2. 响应式设计

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

3. 暗色模式

<div class="bg-white dark:bg-slate-800">
  <!-- 自动适配暗色模式 -->
</div>

4. 动画效果

<div class="animate-pulse hover:scale-105 transition-all">
  悬停效果
</div>

5. 使用任意值

<div class="w-[350px] bg-[#ff5733]">
  <!-- 任意宽度和颜色 -->
</div>

更多技巧请参考 Tailwind CSS 官方文档