Ctrl K
约 9 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证
思维转变：三个「不再」
- 不再起 class 名：card-wrapper、list-item-active 这类命名消失，类名就是样式本身。省下的不是打字，是「这个名字放哪、算不算重复」的心智负担。
- 不再打开第二个文件：样式与结构写在同一行，删组件时样式一起消失，不会留下孤儿 CSS。代价是 JSX/模板变长——用组件抽取来对抗，而不是退回命名。
- 不再随手写 17px：所有间距、字号只能从设计令牌刻度里取（p-4 = 1rem = 16px），全站自然对齐。设计系统不是文档里的愿景，而是补全时弹出的候选列表。
高频类名速查表
| 要做什么 | Tailwind 类 | 等价 CSS |
|---|---|---|
| 水平垂直居中 | flex items-center justify-center | display:flex; align-items:center; justify-content:center |
| 占满一行 / 一屏高 | w-full / h-screen | width:100% / height:100vh |
| 左右留白并限宽 | mx-auto max-w-3xl px-4 | margin-inline:auto; max-width:48rem; padding-inline:1rem |
| 内部间距 | p-4 / gap-2（配合 flex/grid） | padding:1rem / gap:0.5rem |
| 圆角卡片 | rounded-xl shadow-md bg-white | border-radius:0.75rem; box-shadow:…; background:#fff |
| 文字尺寸与颜色 | text-sm text-slate-500 font-medium | font-size:0.875rem; color:#64748b; font-weight:500 |
| 截断省略 | truncate / line-clamp-2 | white-space:nowrap;… / -webkit-line-clamp:2 |
| 悬停与聚焦态 | hover:bg-slate-100 focus:ring-2 | 对应伪类包一层 |
间距刻度：数字就是 rem 的 4 倍体系
p-4、gap-2、top-8 里的数字不是像素，是 0.25rem 的倍数：1 = 0.25rem = 4px（基准 16px），4 = 1rem = 16px，8 = 2rem = 32px。把设计稿的 px 换算成刻度：先除以 4 得到刻度号（20px → 5），不在刻度上再用任意值语法。这套刻度是 Tailwind 约束力的来源，也是它与手写 CSS 最大的行为差异。
响应式与状态前缀：从 min-width 思维读类名
sm:、md:、lg: 是 min-width 断点（默认 640/768/1024px），含义是「这个断点及以上都生效」——所以移动优先的写法是：基础类写给手机，md: 起逐级覆盖。状态前缀 hover:、focus:、disabled: 直接加在类前面，组合顺序是 状态 + 断点 + 类（如 md:hover:bg-blue-600）。任意值语法 bg-[#1e293b]、w-[37.5rem] 兜底一切刻度外的场景，但用得越多约束越弱——它是有意的逃生门，不是常规武器。
移动优先：基础 + 逐级覆盖
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6"> <!-- 手机一列；768px 起三列 --> </div>
任意值：刻度外的兜底
<div class="w-[37.5rem] bg-[#1e293b] top-[117px]">
迁移最容易踩的四个坑
- 全局样式被预检重置：Preflight 会去掉标题字号、列表符号、按钮背景。迁入后发现「h1 变得和正文一样大」，不是 Tailwind 丢了样式，是重置生效了——按设计重新补类。
- 伪元素内容写法变了：before/after 是 before:content-[''] 这样的前缀类，不是 CSS 的 ::before 块。复杂伪元素场景不值得硬转，留原生 CSS。
- 动态拼接类名会失效：类名必须完整出现在源码里才能被扫描器收录，bg-${color}-500 这种运行时拼接扫不到。改成完整类名的三元映射。
- 和现有 CSS 共存时的优先级：Tailwind 工具类是单类名低特异性，容易被旧样式表里的 .card a 这类选择器压过。迁移期用 @layer 或先隔离新页面再渐进替换。
常见问题
Tailwind 会不会让 HTML 变得很难读？
短组件没问题；长页面靠抽取组件控制长度。真正难读的是「又用 Tailwind 又起一堆语义 class 名」的混合态——二选一并保持一致比纠结哪个更好更重要。
任意值语法可以随便用吗？
技术上可以，但每用一次就绕过一次设计令牌约束。经验法则：单一特例用任意值，出现第二次就提升为配置里的新令牌。
怎么把现有 CSS 项目渐进迁移到 Tailwind？
新组件先用 Tailwind 写；旧页面逐块替换，用类名互转工具把旧样式翻成等价类名再微调；全局重置（Preflight）放到最后开启，或先在隔离路由里启用验证。