S14-B04 · 样式方案：Tailwind 与 Animate.css

适用读者：纠结"原子化 CSS 好不好"的人。
前置：S14-B01。
覆盖旧文：348（Tailwind CSS 深度解析，98 点）350（Animate.css，69 点）= 167 点。
上一篇：S14-B03 · 响应式：ref / reactive / 计算 / 侦听
下一篇：S14-B05 · 工程化入门。

1. 一句话结论

Tailwind 解决的不是"少写 CSS"，而是"没有命名负担 + 不会膨胀"：样式跟着结构走，删除组件即删除样式。

方案	核心机制	代价
传统 CSS/SCSS	手写类名 + 全局作用域	命名冲突、死代码堆积
原子化（Tailwind）	组合预定义工具类	HTML 变长、需构建扫描
CSS-in-JS	样式与组件同文件	运行时开销
动画库（Animate.css）	预置 keyframes 类名	只能套用，定制受限

2. Tailwind 的三个真实收益

收益	说明
无命名负担	不用纠结 `.card-title-wrapper-inner`
自动清理	构建时扫描用到的类，未用即剔除（体积小）
一致的设计尺度	`p-4`/`text-sm` 是固定刻度，减少随意取值

"为什么产物反而更小"：Tailwind 只输出你用到的工具类——传统 CSS 里"写了但没人用"的规则会一直留着。

3. 原子化的代价与边界

代价	缓解
HTML 变长、可读性下降	组件化封装（把长类名收进组件）
复杂选择器难表达	少量自定义 CSS / `@apply`
学习成本	记住常用尺度（spacing/color）

判据："样式是"组件级"还是"全局主题级"？" 组件级 → 原子化；全局主题（字体、间距体系）→ 设计 token。

4. Animate.css：预置动画的正确用法

<div class="animate__animated animate__fadeInUp">内容</div>

点	说明
需两个类	`animate__animated` + 具体动画
一次性	动画结束后类还在（要移除才能重播）
定制	只能改时长/延迟（`--animate-duration`）

"什么时候用动画库、什么时候用 GSAP"：

只是"进场/退场"效果 → Animate.css（零 JS）
需要"时间轴/滚动联动/精确控制" → GSAP（A02）

5. 五个误区

误区	真相
"Tailwind 让体积变大"	只输出用到的类
"原子化 = 不写 CSS"	复杂场景仍要自定义
"Animate.css 能精确控制"	只能套用预置动画
"类名长就是坏代码"	组件封装后不影响可读性
"用了 Tailwind 就不需要设计系统"	设计 token 仍要定

6. 自检

原子化 CSS 解决的两个问题？
为什么 Tailwind 产物更小？
原子化的两个代价与缓解？
Animate.css 用的两个类分别是什么？
什么时候该用 GSAP 而不是 Animate.css？

7. 下一篇

S14-B05 · 工程化入门：Vite 与路径别名

样式讲完，下一篇讲"为什么开发态启动快"：Vite 的原生 ESM 与别名解析。

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-348/350。