关键在于理解container仅设最大宽度和居中，响应式由子元素断点类控制；grid-cols-*需配合display: grid使用；移动端优先用md:hidden更安全；自定义断点后须重建CSS并确保配置含对应屏幕尺寸。
怎么用Tailwind实现「宽度随屏幕变，但内容不挤」
关键不是堆md:w-1/2或lg:w-1/3，而是理解container和max-w-系列的分工。容器本身不响应，它只是个带margin: 0 auto和最大宽度限制的块；真正响应的是你给子元素加的断点类。
-
container默认在sm及以上才生效（min-width: 640px），小屏下是100%宽——这点常被忽略，导致手机端内容贴边难看 - 想让卡片在
sm下占满、md下并排两列、xl下三列，直接写sm:w-full md:w-1/2 xl:w-1/3就行，别套flex再算flex-basis - 注意
w-1/2是相对于父容器的50%，如果父没设flex或grid，多个w-1/2元素会垂直堆叠，不是并排
Grid布局里grid-cols-为什么有时不生效
根本原因：父容器没触发BFC或没设display: grid。Tailwind的grid-cols-*只负责生成grid-template-columns，不自动加display属性。
- 必须显式加
grid或grid-cols-*搭配grid（如grid grid-cols-2），单独写grid-cols-2无效 -
grid-cols-2在所有断点都生效；要响应式列数，得写grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 - 列宽用
fr单位更稳：grid-cols-[2fr_1fr]比grid-cols-2更能控比例，且不受gap影响计算 - IE11不支持
grid，如果还要兼容，别用grid-cols-，改用flex+flex-wrap
移动端优先时md:hidden和md:block哪个更安全
用md:hidden。因为Tailwind默认所有类都是“移动端开启”，断点类是覆盖行为——不写任何断点，样式就在所有尺寸生效；写了md:hidden，等于“小屏显示，中屏及以上隐藏”。
-
md:block的问题在于：如果父级有hidden，它只在md+生效，小屏仍继承hidden，结果就是全屏都不见 - 同理，
flex类也默认全局生效，想只在桌面显示菜单？写hidden md:flex，而不是md:flex单用 - 调试时可临时加
outline-red-500看元素是否真的被隐藏，避免误判是渲染问题
自定义断点后xl:text-lg突然失效
因为Tailwind配置里删了xl，或重命名成xxl，但CSS文件没重建。所有断点类名完全由tailwind.config.js里的theme.screens决定，没有默认回退。
- 检查配置是否含
xl: '1280px'，若删了这一行，xl:前缀的所有类都不会生成 - 改完配置必须重新运行构建命令（
npm run build或TAILWIND_MODE=watch npx tailwindcss -i ./src/input.css -o ./dist/output.css），热更新不一定捕获断点变更 - 用
@apply时也受限于配置：如果xl不存在，@apply xl:text-lg编译报错，不会静默忽略
断点不是语法糖，是真实生成的CSS类；少一个配置项，就真少一堆选择器——这点比媒体查询还刚性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
