[!info] related notes

• 所属：Tailwind 基础 MOC
• 前置：心智模型 · 安装
• CSS：盒模型 · Flex · 特异性

Tailwind 核心工具类

这个概念为什么出现

把 class 当黑话背，一遇到冲突就加 !。正确方式是：每个 utility 对应明确 CSS 约束，并落在 spacing/color scale 上。

[!abstract] 一句话理解 先掌握 spacing / flex-grid / size / typography / color / radius-border-shadow，即可完成大部分中后台界面。

最小可运行示例

以下按 v4 默认主题展示；项目自定义 token 或跨主版本升级可能改变同名类的视觉结果。

场景：低库存 SKU 卡片

<article class="max-w-sm rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <div class="flex items-start justify-between gap-3">
    <div>
      <h2 class="text-base font-semibold text-slate-900">SKU-42</h2>
      <p class="mt-1 text-sm text-slate-600">蓝色缠绕膜 · A 仓</p>
    </div>
    <span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
      低库存
    </span>
  </div>
  <p class="mt-4 text-2xl font-semibold tabular-nums text-slate-900">3 <span class="text-sm font-normal text-slate-500">件</span></p>
  <button type="button" class="mt-4 w-full rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-800">
    发起补货
  </button>
</article>

结合场景关注点

1. p-4/mt-4/gap-3 来自间距 scale，不是魔法数散落。
2. flex + items-start + justify-between 是 CSS 布局能力的缩写。
3. 颜色名是设计 token 的调用，而不是随意 hex。

核心地图

目标	示例	CSS 直觉
间距	p-4 px-3 gap-2 m-auto	padding/margin/gap
布局	flex grid items-center justify-between	display/alignment
尺寸	w-full max-w-sm h-10 min-h-screen	width/height
文本	text-sm font-semibold leading-6	font-size/font-weight/line-height
单行截断	truncate	overflow hidden + text-overflow ellipsis + white-space nowrap；需要受限的可用宽度
颜色	bg-white text-slate-700 bg-red-100	background/color
边框圆角阴影	rounded-xl border shadow-sm	border-radius/border/shadow

调试方法

1. 在 DevTools 看最终 CSS 规则
2. 冲突由 CSS 层叠决定：检查 important、层叠层、特异性和样式表中的规则顺序；HTML class 的排列顺序不决定胜负
3. 不会的类先猜 CSS，再查文档，不要叠十个试错类

常见误区

[!warning] 常见误区：只记类名不记 CSS 不会盒模型与 flex 时，utility 只是更短的混乱。

本节总结

核心工具类是设计系统 API 的常用子集；映射回 CSS 才能排障。

自测题

1. p-4 与 px-4 py-2 如何取舍？
2. 为什么 text-sm 不负责颜色？

参考答案

1. 四边相同用 p-*；轴向上不同用 px/py 或更细方向类。
2. 单一职责：字号与颜色分属不同 utility，便于组合。