container加了没缩进是因为默认仅sm+设max-width，小屏退化为w-full，且依赖父容器有明确宽度上下文；需搭配mx-auto并确保父级非flex/grid无宽或absolute无宽。
直接照搬旧CSS结构加Tailwind类名，90%会失败。Tailwind不是样式映射表，而是原子化组合系统——重构成败取决于是否放弃“class对等替换”思维，转而用flex/grid/spacing语义重新建模布局逻辑。
为什么container加了却没缩进效果
container默认只在sm（640px）及以上才设max-width，小屏下等于mx-auto w-full，内容照样贴边。更关键的是，它依赖父容器有明确宽度上下文：如果父级是flex、grid或absolute定位但没设width:100%，container就会退化为全宽。
- 调试时直接看浏览器Computed面板里
max-width是否被计算为auto或远小于预期值 - 稳妥做法是改用
max-w-4xl mx-auto，绕过断点逻辑干扰 - 若需所有尺寸都约束宽度，别硬改
container，在tailwind.config.js里加theme.extend.maxWidth.container-fixed: '896px'，再用max-w-container-fixed
grid-cols-*写出来却不换行
grid-cols-*类只生成grid-template-columns，不自动加display: grid。单独写grid-cols-2完全无效，必须显式声明grid或搭配其他grid类。
- 正确写法：
class="grid grid-cols-2 gap-4"，缺grid就白写 - 响应式列数要写全：
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3，不能只写lg:grid-cols-3——小屏会继承单列，但中屏不会自动变成两列 - 子元素有
min-width（如图片）时，固定列数易撑破网格，改用grid-cols-[repeat(auto-fit,minmax(200px,1fr))))]
flex布局错位或间距失控
flex默认flex-row且flex-wrap: nowrap，子元素超宽直接溢出；justify-between和justify-around对子元素数量敏感，2个元素时表现正常，3个以上间隙就不均。
- 需要换行必须显式加
flex-wrap，否则flex只是横向拉伸容器 - 控制子项间距优先用
gap-4，别用mr-4之类手动调每个子项——后者易引发外边距合并（margin collapse），尤其与相邻元素的mb-4叠加时 - 垂直居中要同时写
items-center（交叉轴）和h-full或min-h-screen（确保父容器有高度）
响应式类名突然失效或行为反直觉
Tailwind断点不是覆盖逻辑，而是媒体查询封装：写了md:text-center，只在≥768px生效，更小屏幕仍用基础类（无断点前缀）；md:hidden意思是“中屏及以上隐藏”，小屏反而显示——这点常被当成“移动端隐藏”误用。
- 想实现“小屏左对齐、中屏居中、大屏右对齐”，必须写全：
text-left md:text-center lg:text-right -
xl:text-lg失效？先查tailwind.config.js里theme.screens是否还定义了xl，删了就真不生成，热更新也不补 - 别用
sm:做“移动端开关”，因为640px已覆盖很多手机横屏，md:hidden比sm:hidden更符合真实“桌面端隐藏”意图
最难的从来不是选哪个class，而是判断该用flex还是grid——前者适合线性流式内容对齐，后者适合二维栅格结构；一旦选错，后面所有间距、断点、状态类都会跟着错，而且越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
