gap-y 在 Flex 容器中不生效，因 CSS 规范仅支持单值 gap；仅 Grid 和 Safari 16.4+ 部分支持 gap-y，推荐用 gap-4、Grid 或 mb-4 回退，并避免与 margin 混用。
gap-y 在 Flex 容器中不生效？检查 display 类型
Flex 布局下 gap-y 无效，不是 Tailwind 的 bug，而是 CSS 规范限制：Flex 容器只支持单个 gap（等同于 gap-x 和 gap-y 同值），不支持独立的垂直/水平 gap。
真正支持 gap-y 的只有 Grid 和新版本的 Flex（仅 Safari 16.4+ 开始部分支持，但不可靠）。
- 用
flex-col+gap-y-4？实际会被忽略 → 改用flex-col gap-4（统一间距）或直接切 Grid - 需要精确控制垂直间距 → 优先选
grid grid-rows-[auto_auto_auto]+gap-y-4 - 旧版 Safari 或 IE 兼容需求 → 回退到
mb-4（最后一个元素加mb-0）
gap-y 和 margin-bottom 混用导致双倍间距
常见错误：给子元素同时加 gap-y-4 和 mb-4，视觉上间距变成 8px（Tailwind 默认 1rem = 16px，gap-y-4 是 1rem，mb-4 又是 1rem）。
Gap 是容器级属性，它直接作用于子项之间；margin 是子项自身外边距 —— 两者叠加会重复计算。
立即学习“前端免费学习笔记（深入）”；
- 用
gap-y就别在子元素上写mt/mb，尤其注意循环渲染时动态加 class 的逻辑 - 需要首尾无间距？Grid 下用
first:mt-0 last:mb-0无效 → 改用gap-y-4 first:mt-0并手动移除容器 top padding，或用grid-rows配合place-items - 响应式场景下：
sm:gap-y-2 md:gap-y-4比一堆sm:mb-2 md:mb-4更干净、更少冲突
gap-y 在 Grid 中的行数陷阱：auto-rows 影响实际间隙数量
gap-y 的数量 ≠ 子元素数量 − 1。Grid 容器若用 grid-rows-auto 或未显式定义行数，浏览器可能合并行轨道，导致部分 gap-y “消失”。
比如 3 个子元素，在 grid grid-cols-1 grid-rows-[auto_auto_auto] 下能稳定出 2 处 gap-y；但换成 grid grid-cols-1 auto-rows-min，若内容高度一致，可能被压缩成 2 行甚至 1 行。
- 确保间隙稳定：显式声明行结构，如
grid grid-cols-1 grid-rows-[repeat(3,auto)] - 动态内容？用
grid grid-cols-1 grid-rows-[repeat(auto-fit,minmax(0,1fr)))]+gap-y-4，配合minmax(0,1fr)防止 collapse - 调试技巧：临时加
outline或背景色到子元素，看清 gap 是否真被渲染出来
gap-y 不继承，也不能用 @apply 提取为复用 class
gap-y 是容器样式，不会向下影响后代；而且 Tailwind 的 @apply 不支持带连字符的工具类（如 @apply gap-y-4 会报错）。
想封装垂直间距逻辑？只能走 CSS 自定义属性或组件抽象，不能靠 @apply。
- 错误写法：
@apply flex flex-col gap-y-4;→ 编译失败 - 正确替代：
@apply flex flex-col gap-4;（仅限统一 gap）或抽成 React/Vue 组件传gapYprop - 全局统一？在
tailwind.config.js的theme.extend.spacing里加'1.5': '0.375rem'，再写gap-y-[1.5]，但失去语义性
gap-y 看似简单，但它的生效前提（display 类型）、叠加行为（和 margin 冲突）、Grid 行模型依赖、以及无法 @apply 这四点，最容易在改版或协作时漏掉。别默认它“应该起作用”。
