框架的两大流派
CSS 框架分为两大思想流派，理解差异是选型的基础。
组件流派（以 Bootstrap 为代表）：提供成品组件类。btn btn-primary 两个类名就是一个完整的按钮，颜色、内边距、hover 全部内置。优点是上手极快、风格统一；代价是定制要靠覆盖样式，做出来的页面容易「千站一面」。
原子流派（以 Tailwind CSS 为代表）：不提供成品组件，只提供成百上千个只做一件事的小工具类（py-2 px-4 rounded bg-blue-500），像搭积木一样组合出任何设计。优点是自由度极高、不用写自定义 CSS；代价是类名很长、要背一套工具类词表。
怎么选？快速搭建后台、官网 → Bootstrap；追求独特设计、长期维护的设计系统 → Tailwind。两者也可以共存于同一项目（注意类名冲突）。
本节要点组件流派：成品类名拿来即用，快但同质化；原子流派：工具类自由组合，灵活但类名长；按项目性质选。
代码
<!-- 流派一：组件类（Bootstrap）—— 成品拿来即用 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<!-- 优点：两个类名搞定；缺点：定制要覆盖样式，容易千站一面 -->
<!-- 流派二：原子类（Tailwind CSS）—— 小工具类自由组合 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white
font-bold py-2 px-4 rounded">
主要按钮
</button>
<!-- bg-blue-500 背景 / py-2 px-4 内边距 / rounded 圆角
hover:bg-blue-700 悬停变色 —— 每个类只做一件事 -->
<!-- 优点：任意定制不写自定义 CSS；缺点：类名长，需背词表 -->📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读