03-核心概念

Tailwind CSS 核心概念

深入理解 Tailwind CSS 的设计理念和核心概念。

---

1. 实用优先（Utility-First）

1.1 什么是实用优先

实用优先是一种 CSS 架构方法，通过提供大量单一职责的工具类来构建界面，而不是使用语义化的类名。

1.2 传统方式 vs 实用优先

传统方式

<!-- HTML -->
<div class="card">
  <h2 class="card-title">标题</h2>
</div>

/* CSS */
.card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

问题：

• 需要在 HTML 和 CSS 之间切换
• 需要为每个组件写 CSS
• 难以复用和组合

实用优先方式

<div class="bg-white p-6 rounded-lg shadow-sm">
  <h2 class="text-2xl font-semibold mb-2">标题</h2>
</div>

优势：

• 所有样式在 HTML 中可见
• 不需要写自定义 CSS
• 易于组合和复用

1.3 何时使用组件类

虽然实用优先是核心，但有时也需要组件类：

/* 使用 @apply 创建组件类 */
.btn {
  @apply px-4 py-2 rounded-lg font-semibold;
}
 
.btn-primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

使用场景：

• 需要大量复用的组件
• 需要保持一致的样式
• 需要简化 HTML

---

2. 响应式设计

2.1 移动优先

Tailwind CSS 采用移动优先的设计理念，基础样式针对移动设备，然后使用断点适配更大屏幕。

<!-- 移动端：小字体，桌面端：大字体 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">标题</h1>
 
<!-- 移动端：单列，桌面端：多列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- 内容 -->
</div>

2.2 断点系统

断点	最小宽度	说明
sm	640px	小屏幕（平板竖屏）
md	768px	中等屏幕（平板横屏）
lg	1024px	大屏幕（桌面）
xl	1280px	超大屏幕
2xl	1536px	超超大屏幕

2.3 响应式策略

<!-- 策略 1：从小到大的渐进增强 -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  渐进增强的文字
</div>
 
<!-- 策略 2：显示/隐藏 -->
<div class="hidden md:block">
  仅中等屏幕及以上显示
</div>
 
<!-- 策略 3：布局变化 -->
<div class="flex flex-col md:flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

---

3. 状态变体

3.1 伪类变体

Tailwind CSS 支持所有 CSS 伪类：

<!-- 悬停 -->
<button class="bg-blue-500 hover:bg-blue-600">
  悬停
</button>
 
<!-- 聚焦 -->
<input class="border focus:ring-2 focus:ring-blue-500">
 
<!-- 激活 -->
<button class="active:scale-95">
  激活
</button>
 
<!-- 焦点可见 -->
<button class="focus-visible:ring-2">
  焦点可见
</button>

3.2 表单状态

<!-- 必填 -->
<input required class="required:border-red-500">
 
<!-- 有效 -->
<input type="email" class="valid:border-green-500">
 
<!-- 无效 -->
<input type="email" class="invalid:border-red-500">
 
<!-- 禁用 -->
<button disabled class="disabled:opacity-50 disabled:cursor-not-allowed">
  禁用
</button>

3.3 组状态

使用 group 类名和 group-hover: 等变体：

<div class="group">
  <div class="bg-gray-100 group-hover:bg-blue-500">
    悬停父元素时变蓝
  </div>
  <p class="text-gray-600 group-hover:text-blue-600">
    文字也会变化
  </p>
</div>

3.4 同级状态

使用 peer 类名和 peer-*: 变体：

<input type="checkbox" class="peer">
<label class="peer-checked:text-blue-600">
  选中时文字变蓝
</label>

---

4. 暗色模式

4.1 配置暗色模式

在 tailwind.config.js 中启用：

module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}

• class：通过添加 dark 类名切换
• media：根据系统偏好自动切换

4.2 使用暗色模式

<!-- 使用 dark: 前缀 -->
<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">
    文字颜色
  </p>
</div>

4.3 切换暗色模式

// 切换暗色模式
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

---

5. 自定义值

5.1 任意值

使用方括号语法添加任意值：

<div class="top-[117px]">
  自定义定位
</div>
 
<div class="bg-[#1da1f2]">
  自定义颜色
</div>
 
<div class="text-[14px]">
  自定义字体大小
</div>

5.2 使用 CSS 变量

<div class="bg-[var(--primary-color)]">
  使用 CSS 变量
</div>

---

6. 函数与指令

6.1 @apply 指令

将工具类应用到自定义 CSS：

.btn {
  @apply px-4 py-2 rounded-lg font-semibold;
}
 
.btn-primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

6.2 @layer 指令

将样式添加到特定层：

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
}
 
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}
 
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

6.3 @variants 指令

创建自定义变体：

@variants hover, focus {
  .rotate-45 {
    transform: rotate(45deg);
  }
}

---

7. 性能优化

7.1 JIT 模式

Tailwind CSS 3.0+ 默认启用 JIT（Just-In-Time）模式，只生成使用的样式。

优势：

• 开发时快速编译
• 生产环境文件体积小
• 支持任意值

7.2 PurgeCSS

Tailwind CSS 内置 PurgeCSS，自动移除未使用的样式。

配置：

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
  ],
  // ...
}

7.3 最佳实践

1. 正确配置 content：确保 Tailwind 能扫描到所有文件
2. 避免动态类名：使用完整类名而不是字符串拼接
3. 使用组件类：对于大量复用的样式，使用 @apply

---

8. 设计系统

8.1 设计令牌

Tailwind CSS 提供了完整的设计令牌系统：

• 颜色：50-900 的色阶
• 间距：0.25rem 的倍数
• 字体大小：预设的字体大小
• 断点：响应式断点

8.2 自定义主题

在 tailwind.config.js 中扩展主题：

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1e40af',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

---

9. 下一步

现在你已经理解了 Tailwind CSS 的核心概念，可以：

1. 深入学习 布局系统
2. 掌握 响应式设计
3. 学习 配置与定制

---

相关链接：

• Tailwind CSS 文档
• 设计系统

TailwindCSS 核心概念 实用优先 响应式