TailwindCSS 实用技巧分享

TailwindCSS 是一个实用优先的 CSS 框架，它通过提供大量的原子类来帮助开发者快速构建界面。

为什么选择 TailwindCSS？

优势

• 快速开发 - 无需离开 HTML 即可设计界面
• 一致性 - 预定义的设计系统确保视觉一致性
• 响应式 - 内置响应式设计支持
• 可定制 - 高度可配置的设计系统
• 性能 - 只包含使用的样式

与传统 CSS 的对比

<!-- 传统 CSS -->
<div class="card">
  <h2 class="card-title">标题</h2>
  <p class="card-content">内容</p>
</div>

<!-- TailwindCSS -->
<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-4">标题</h2>
  <p class="text-gray-600">内容</p>
</div>

实用技巧

1. 响应式设计

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 移动端全宽，平板半宽，桌面1/3宽 -->
</div>

2. 状态变体

<button class="bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
  点击我
</button>

3. 自定义组件

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

4. 暗色模式

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  支持暗色模式的内容
</div>

最佳实践

1. 合理使用 @apply

/* 好的做法 - 常用组件 */
.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

/* 避免过度使用 */
.complex-component {
  @apply bg-white p-4 rounded shadow border border-gray-200 text-gray-800 hover:shadow-lg transition-shadow duration-200 ...;
}

2. 配置定制

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

3. 使用 Prettier 插件

安装并配置 prettier-plugin-tailwindcss 来自动排序类名：

npm install -D prettier prettier-plugin-tailwindcss

常用模式

卡片布局

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="image.jpg" alt="Image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">标签</div>
      <h3 class="mt-1 text-lg leading-tight font-medium text-black">标题</h3>
      <p class="mt-2 text-gray-500">描述内容...</p>
    </div>
  </div>
</div>

网格布局

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 网格项目 -->
</div>

总结

TailwindCSS 通过其原子化的设计理念，让我们能够快速构建美观且一致的用户界面。虽然初学时可能需要适应大量的类名，但一旦熟悉，你会发现它极大地提高了开发效率。

记住关键是要掌握其设计系统和响应式原则，然后在实践中不断积累经验。