[TOC]

核心概念

Tailwind CSS 的核心思想是「实用类优先」。开发者不再先给元素起语义类名再写 CSS，而是直接组合一组小而明确的工具类完成样式。

实用类优先

传统写法：

<button class="submit-button">提交</button>

.submit-button {
  border-radius: 8px;
  background: #2563eb;
  padding: 8px 16px;
  color: #fff;
}

Tailwind 写法：

<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  提交
</button>

工具类命名规律

组合而非覆盖

Tailwind 鼓励通过组合工具类表达样式，而不是编写大量覆盖规则：

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">尊云科技服务</h2>
  <p class="mt-2 text-sm text-slate-600">zunyunkeji.com 项目卡片内容说明。</p>
</div>

状态变体

状态变体使用 状态: 前缀：

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 disabled:opacity-50">
  保存
</button>

常见状态：

• hover: 鼠标悬停
• focus: 获得焦点
• active: 激活状态
• disabled: 禁用状态
• checked: 选中状态
• group-hover: 父级悬停影响子级

响应式变体

响应式变体使用断点前缀：

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

这表示：

• 默认 1 列
• md 及以上 2 列
• lg 及以上 3 列

任意值

当默认设计令牌不满足需求时，可以使用方括号任意值：

<div class="w-[320px] bg-[#0f172a] text-[15px]">
  自定义尺寸和颜色
</div>

任意值适合少量特殊场景，不建议大量滥用，否则会降低设计一致性。