tailwind 的响应式设计遵循移动优先原则，基础样式默认作用于最小屏幕，通过 sm:、md:、lg: 等前缀在更大视口上覆盖；需显式声明 display 类（如 grid、flex）才能启用布局工具类；隐藏/显示应全程用断点控制，避免混用 hidden；断点值以 tailwind.config.js 中 theme.screens 配置为准，且顺序必须递增。
直接在 class 属性里加 sm:、md:、lg: 这类前缀，就能让样式只在对应及更大的屏幕宽度下生效。关键不是背数值，而是理解“移动优先”和“断点覆盖”的逻辑——基础样式写在前面，大屏优化叠在后面，顺序和配置决定效果。
先写小屏样式，再逐级增强
Tailwind 默认所有无前缀类（如 text-center、w-full）都作用于最小屏幕（即手机竖屏），然后用前缀在更大视口上覆盖。比如：
- w-full md:w-1/2 lg:w-1/3：手机占满全宽，中屏缩为一半，大屏再缩为三分之一
- flex flex-col sm:flex-row：小屏纵向堆叠，≥640px 改为横向排列
- p-4 md:p-6 lg:p-8：内边距随屏幕增大逐步加大，提升阅读舒适度
必须显式开启布局容器
像 grid-cols-2 或 flex 这类工具类本身不带 display 声明，只改网格列数或 flex 属性。漏掉基础 display 类，样式就无效：
- ❌ 错误：
grid-cols-1 sm:grid-cols-2—— 容器仍是 block，列数不起作用 - ✅ 正确：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3—— 先声明 grid，再控制列数 - 同理，flex 布局要写 flex 或 inline-flex 才能激活
控制显隐别混用 hidden
hidden 是全局强制隐藏（display: none），它没有媒体查询包裹，一旦出现就会压倒后续断点类。正确做法是全程用断点控制：
- ❌ 错误：
hidden sm:block md:hidden—— hidden 在所有尺寸生效，sm:block 白写了 - ✅ 正确：
block sm:hidden md:block lg:hidden—— 小屏显示 → 中屏隐藏 → 大屏再显示 - 或者更简洁：
sm:hidden lg:block（默认显示，中屏隐藏，大屏显示）
断点值以配置为准，不是固定像素
sm、md、lg 对应多少像素，完全取决于你项目里的 tailwind.config.js 中 theme.screens 的定义。默认是 sm: '640px'、md: '768px'、lg: '1024px'，但只要改过，就得按新值来：
- 配置写成
md: '800px'，那 md:flex 就只在 ≥800px 时触发，790px 下不生效 - 单位不能省：
'md': 768❌（JIT 编译器忽略），'md': '768px'✅ - 断点顺序必须递增，否则中间区间会“掉档”，比如
{ sm: '640px', tablet: '900px', md: '768px' }会让 768–899px 区间无匹配规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
