初学者应先学原生CSS再用框架。第1阶段用内联style，第2阶段用.css文件和类选择器，第3阶段用PostCSS插件，第4阶段按需局部引入Bootstrap；真正掌握后再用Tailwind等框架。
初学 CSS 就用 Tailwind 或 Bootstrap？真不一定适合
直接上框架对多数初学者不是加速，而是制造理解断层。你写 @apply flex justify-center 却不知道 display: flex 和 justify-content 是什么，调试时连浏览器开发者工具里哪条样式被覆盖都看不懂。
Tailwind 的 utility class 为什么让新手更难定位问题
它把样式逻辑拆得太碎，一个按钮可能涉及 bg-blue-500、hover:bg-blue-700、px-4、py-2、rounded 五六个类——但没学过 padding 和 border-radius 的含义，就只能靠试错堆砌，改错时也不知道该删哪个类。
- 浏览器审查元素看到的是
class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-700"，但原始 CSS 规则藏在框架的庞大 CSS 文件里，无法直接修改或打断点 -
px-4对应padding-left: 1rem; padding-right: 1rem，但初学者没建立「内边距→物理空间→视觉节奏」的直觉 - 响应式写法如
md:text-lg sm:hidden看似简洁，实则依赖对媒体查询机制的隐含理解，而这个机制本身就得先会写@media (min-width: 768px) { ... }
更顺的工具演进路径：从原生 CSS 开始，按需引入
不是拒绝工具，而是让工具补足你已理解的部分，而不是代替理解。
- 第 1 阶段：纯 HTML + 内联
style属性（如<div style="color: red; font-size: 16px;">），直观感受属性和效果的映射 - 第 2 阶段：独立
.css文件 + 类选择器（.btn { background: #007bff; }），开始理解「复用」和「层叠」 - 第 3 阶段：小范围用 PostCSS 插件（如
autoprefixer），自动补全-webkit-前缀，不用手写-webkit-box-shadow - 第 4 阶段：只在需要快速搭后台管理页时，局部引入 Bootstrap 的
table或form-control类，其他仍手写
什么时候该考虑上框架？看这三条信号
不是“学完基础就该升级”，而是项目需求倒逼技术选型。
立即学习“前端免费学习笔记（深入）”；
- 你已经能徒手写出居中一个带阴影、悬停变色、适配手机宽度的卡片，并且能解释每一行 CSS 为什么写在那里
- 你在维护一个 5+ 页面的项目，重复写
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))开始感到烦躁 - 团队协作中，设计师给的 Figma 标注直接对应
text-sm text-gray-500，而你不再需要查文档换算像素值
.card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 1rem;
}
.card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
真正卡住人的从来不是框架语法，而是当 flex 不生效时，你第一反应是检查 display 还是翻 Tailwind 文档搜 “how to make flex work”。前者靠积累，后者靠查表——而初学阶段，你缺的是前者。
