Tailwind CSS 最佳实践指南

为什么使用 Tailwind CSS？

Tailwind CSS 是一个实用优先的 CSS 框架，它提供了低级实用类，让你可以直接在 HTML 中构建自定义设计。

核心概念

1. 实用类优先

传统 CSS：

<!-- 需要写自定义 CSS -->
<button class="btn-primary">点击</button>

Tailwind CSS：

<!-- 直接使用实用类 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  点击
</button>

2. 响应式设计

Tailwind 使用移动优先的方法：

<!-- 默认：移动端 -->
<!-- md: 中等屏幕及以上 -->
<!-- lg: 大屏幕及以上 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式内容
</div>

3. 暗色模式

Tailwind 原生支持暗色模式：

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  自动适配明暗主题
</div>

最佳实践

✅ 推荐的写法

<!-- 1. 按逻辑顺序组织类名 -->
<button class="
  px-4 py-2              /* 尺寸 */
  bg-blue-500            /* 背景 */
  text-white             /* 文字 */
  rounded-lg             /* 圆角 */
  hover:bg-blue-600      /* 交互 */
  transition-colors      /* 动画 */
">
  提交
</button>

✅ 提取组件

对于重复使用的样式，使用 @apply 或组件封装：

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
}

✅ 配置主题

在 tailwind.config.js 中自定义设计系统：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fff7ed',
          500: '#d97757',
          900: '#7c2d12',
        },
      },
    },
  },
}

常用模式

布局模式

<!-- 居中容器 -->
<div class="max-w-5xl mx-auto px-4">
  内容
</div>

<!-- Flexbox 居中 -->
<div class="flex items-center justify-center min-h-screen">
  居中内容
</div>

<!-- Grid 布局 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

文字样式

<!-- 标题层级 -->
<h1 class="text-3xl font-bold text-gray-900">主标题</h1>
<h2 class="text-2xl font-semibold text-gray-800">副标题</h2>
<p class="text-base text-gray-600 leading-relaxed">正文内容</p>

性能优化

使用 PurgeCSS：Tailwind 自动移除未使用的样式
启用 JIT 模式：只生成你使用的样式
避免过度嵌套：保持 HTML 结构扁平

总结

Tailwind CSS 通过实用类的方式，让 CSS 开发更加高效和可维护。配合良好的组织和组件化实践，可以大大提升开发效率。

相关链接：