Tailwind CSS 实用技巧分享 🎨

Tailwind CSS 是一个功能优先的 CSS 框架，让你无需离开 HTML 就能构建出美观的界面。

1. 响应式设计

Tailwind 使用移动优先的断点系统：

<!-- 移动端：单列 / 平板：两列 / 桌面：三列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

2. 悬停效果

<button class="bg-blue-500 hover:bg-blue-600 
               text-white hover:text-blue-100
               transform hover:scale-105
               transition-all duration-200">
  点击我
</button>

3. 渐变背景

<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  渐变背景文字
</div>

4. 毛玻璃效果

<div class="bg-white/80 backdrop-blur-md rounded-xl shadow-lg p-6">
  毛玻璃卡片
</div>

5. 暗色模式

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

最佳实践

• 使用 @apply 抽取公共样式：当某个样式组合反复出现时，可以提取到 CSS 中
• 配置 tailwind.config.js：自定义颜色、字体、间距等设计令牌
• 启用 purge：生产环境自动移除未使用的 CSS，减小文件体积

记住，Tailwind 的核心理念不是让你写更多的 class，而是让你更快地实现设计稿。