Tailwind CSS 实用技巧

Tailwind CSS 简介

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量的原子类来构建自定义设计。

常用技巧

1. 响应式设计

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 内容 -->
</div>

2. 暗色模式

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

3. 自定义配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: ''#6366f1'',
          600: ''#4f46e5'',
        }
      }
    }
  }
}

性能优化

Tailwind 使用 PurgeCSS 自动移除未使用的样式，确保生产构建的 CSS 文件尽可能小。