根本差别在于是否愿为一致性、响应式适配、重复样式收敛持续手动维护；手写CSS易失控因命名冲突、断点不一、单位混乱、伪类覆盖难；Tailwind用原子类规避问题但HTML变冗长；Bootstrap省设计决策时间但受限于其设计边界。
原生写 CSS 和用框架，根本差别不在“谁更高级”，而在于你愿不愿意为「一致性」「响应式适配」「重复样式收敛」这些事，持续花时间手动维护。
为什么手写 CSS 很快就失控？
不是写不出来，是改起来越来越难。一个 .btn 类在 3 个页面里被复制粘贴、微调颜色/间距/圆角，半年后没人记得哪版才是“主版本”。你改 button.css，但 form-page.html 里那个按钮还挂着 style="margin-left: 8px" 的内联样式——它赢了优先级，也赢了你的调试时间。
- 命名冲突：两个开发者都定义了
.card，但一个指信息卡片，一个指支付卡组件 - 响应式断点不统一：
@media (max-width: 768px)在 A 文件里是移动端，在 B 文件里却是平板端 - 间距单位混乱：有人用
rem，有人用px，还有人直接写20（忘了单位） - 伪类覆盖难：想让
:hover下的.btn-primary变深色？得翻出所有相关选择器链，确认没被更具体的选择器压住
Tailwind 这类原子化框架怎么绕过这些问题？
它不提供 .btn 或 .card 这种语义类，而是把样式拆成最小可组合单元，比如 px-4、bg-blue-500、hover:bg-blue-600。这意味着：
- 没有“组件样式源码”要读——类名即含义，不用查文档也能猜八成
- 不存在“覆盖框架样式”的需求：你不用改框架，只管用新类名组合
- 响应式天然内建：
md:text-lg就是“中屏及以上才生效”，不用自己写媒体查询 - 打包时可 tree-shake：没用过的
text-9xl或inset-y-0不会进最终 CSS
但代价也很实在：
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Submit</button>比
<button class="btn btn-primary">Submit</button> 长得多，HTML 显得“胖”。这不是 bug，是设计取舍。
立即学习“前端免费学习笔记（深入）”；
Bootstrap 这类传统框架真正省的是什么？
它省的不是“写 CSS 的时间”，而是“做设计决策的时间”。你不需要纠结按钮圆角该是 4px 还是 6px，因为 .btn 已经定了；也不用反复验证栅格在 iOS Safari 下是否塌陷，因为 .row + .col-md-6 组合已经过千个项目锤炼。
- JS 插件是真省事：
data-bs-toggle="modal"比手写模态框的 backdrop、focus trap、esc 关闭逻辑快 10 倍 - 变量系统（如 Sass
$primary）允许主题切换，但改完得全量编译，不能局部热更新 - 容易踩坑：直接覆盖
.btn样式时，常漏掉.btn:focus或.btn:disabled状态，导致可访问性失败
框架不是银弹。Tailwind 让你掌控每个像素，但要求你有清晰的设计系统约束；Bootstrap 给你一套答案，但你要接受它的设计边界。最常被忽略的一点是：**无论选哪个，一旦项目进入维护期，CSS 的组织方式（比如要不要拆 components/ 目录、如何隔离第三方样式）比用不用框架影响更大。**
