必须先掌握 display、flex 和 grid 等原生 CSS 布局能力，再学框架；否则无法理解优先级、盒模型等底层逻辑，导致框架“不生效”；Tailwind 是 CSS 属性的 class 映射，非替代品，需结合原生 CSS 分层协作。
学 CSS 框架前，得先会写 display、flex 和 grid
不会手动布局就直接上 Tailwind 或 Bootstrap，等于拿扳手当锤子用——能敲，但螺丝拧不紧，出问题时连哪颗松了都找不到。
真实项目里，90% 的“框架不生效”其实是基础 CSS 优先级、继承或盒模型理解偏差导致的。比如：tailwind 的 flex 工具类失效，八成是父容器没设 display: flex，而你误以为框架会自动补全。
-
flex和grid不是“选学”，是现代布局的必经路径；没它们，连Bootstrap 5的栅格系统都调不明白 -
display: contents、aspect-ratio、clamp()这些原生能力，比框架里一堆 utility class 更轻、更可控 - 框架文档里写的“响应式断点”，本质就是媒体查询 +
max-width/min-width，没这底子，看文档像看加密电报
Tailwind 适合什么人？不适合什么人？
它不是“CSS 替代品”，而是把 CSS 属性名变成 class 名的编译层。用得好，效率翻倍；用歪了，HTML 里塞满 sm:ml-4 md:mb-6 lg:px-8 xl:rounded-lg，维护成本比手写 CSS 还高。
- 适合：已有清晰设计系统、团队统一规范、需要快速产出多套主题（靠
@layer+theme配置） - 不适合：刚学完
float就想上tw；或项目里大量动态样式（比如style={{ left: x + 'px' }}），硬套 utility class 反而绕路 - 注意：
tailwind.config.js里删掉不用的spacing或fontSize，否则打包体积白涨 30KB
要不要封装自己的 CSS 工具类？
别急着造轮子。先试三个月纯原生 CSS + :is() + hsl() 变量 + @container，再决定是否需要抽象。很多所谓“定制框架”，最后只是把 margin-top: 1rem 换成 m-t-4，没解决任何实际问题。
- 真值得封装的，是业务强相关的东西：比如
.card-shadow-sm（带条件的阴影）、.text-truncate-2（两行省略）、.focus-ring（可访问性焦点环） - 避免封装
mt-2类工具类——除非你团队里所有人对 “2 = 0.5rem” 这个映射达成绝对共识，且设计师稿子里单位全是“间距 2” - 用
CSS @layer管理层级比写一堆!important实在得多，也比引入PostCSS插件轻量
框架和原生 CSS 不是二选一，是分层协作
一个按钮组件，button 标签本身用原生语义 + :hover / :focus-visible 控制状态；动画用 @keyframes 写在 base 层；颜色和圆角从 :root 变量读取；只有响应式换色逻辑才交给框架的 md:text-blue-600 这类 class。
立即学习“前端免费学习笔记（深入）”；
:root {
--color-primary: hsl(200, 100%, 50%);
--radius-md: clamp(4px, 0.5vw, 8px);
}
.btn {
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
background: var(--color-primary);
transition: background 0.2s;
}
.btn:hover {
background: hsl(200, 100%, 40%);
}
真正卡住效率的，从来不是“该不该用框架”，而是分不清哪些该由浏览器原生保证（比如伪类、继承、层叠），哪些该由工具抽象（比如主题切换、断点适配）。把 z-index 值全扔进框架 token 里管理，不如先搞懂 stacking context 是怎么形成的。
