[!info] 关联笔记

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

Tailwind 核心工具类

这个概念为什么出现

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

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

最小可运行示例

场景：低库存 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 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 truncate	font/line-height
颜色	bg-white text-slate-700 bg-red-100	background/color
边框圆角阴影	rounded-xl border shadow-sm	border-radius/border/shadow

调试方法

1. 在 DevTools 看最终 CSS 规则
2. 冲突时回想：同属性后写/层叠层/important
3. 不会的类先猜 CSS，再查文档，不要叠十个试错类

常见误区

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

本节总结

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

自测题

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

参考答案

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