space-x-和space-y-是Tailwind中控制相邻兄弟元素间距的工具类，仅对普通文档流中的块级元素生效；失效主因是父容器display模式不匹配、默认margin干扰或子元素脱离文档流。
space-x 和 space-y 不是「类名」，也不是「Space-between」——这是常见误解的起点。Tailwind 没有叫 space-between 的工具类，真正用来控制兄弟元素间距的是 space-x-<em></em> 和 space-y-，它们只在普通文档流中的相邻兄弟元素上生效，且会自动跳过首尾。
为什么 space-y-4 加了却没反应？
最常卡住的地方不是写错类名，而是父容器或子元素的 display 模式不匹配：
- 父容器用了
flex或grid→space-y-*完全失效（改用gap-4） - 父容器是
ul或ol→ 浏览器默认给它加了margin-block，干扰视觉节奏；需显式加my-0 - 子元素是
inline或inline-flex→space-y-*对行内元素无效，必须是块级或 flex item 以外的流式元素 - 子元素用了
float或position: absolute→ 脱离文档流，space-y-*失去作用对象
space-x-* 和 gap-* 到底该选哪个？
关键看布局意图和兼容性要求：
- 要让一组按钮/标签水平排列且等距 → 用
flex space-x-4（注意：不能同时给按钮加mr-4，否则间距翻倍） - 要让卡片网格垂直对齐、行间留空 → 用
grid grid-cols-1 gap-6，而不是space-y-6 - 需要兼容 IE →
gap不可用，只能退回到mt-4 first:mt-0或封装成组件逻辑 - 子元素中混有需要单独右对齐的项（比如操作按钮）→ 保留
gap-4，再对那个按钮加ml-auto，别用mr-*破坏整体节奏
自定义 space-x 数值时，配置写错位置就白改
新增或修改 spacing 值（比如想支持 space-y-2.5）必须写在 tailwind.config.js 的 theme.spacing 下，不是 extend.spacing：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
theme: { spacing: { '2.5': '0.625rem', 'two-point-five': '0.625rem' } } - 键名不能含小数点，所以
2.5得写成two-point-five或2_5（生成类名为space-y-2_5） - 改完必须重启开发服务器，热更新不监听 config 变更
- 如果用了函数式写法如
spacing: (n) => `${n * 8}px`，那space-y-3就是24px，但space-y-0.5会变成4px—— 注意小数是否被函数支持
响应式 space-y 容易漏掉断点覆盖
Tailwind 是移动优先，断点类按顺序覆盖。写 md:space-y-6 却没设基础值，小屏下实际是 space-y-0：
- 安全写法：
space-y-2 sm:space-y-4 md:space-y-6，从最小断点开始逐级增强 - 不要依赖“默认有间距”，未声明即为零
- 调试时直接看浏览器 computed 样式里生效的是哪条规则，比猜更快
- 若用动态拼接类名（如
class="space-y-${size}"），确保size的取值在构建时能被静态分析到，否则对应 CSS 不会生成
真正麻烦的从来不是“怎么写类名”，而是父容器 display 模式、默认 margin、断点覆盖逻辑这三层隐性约束。把这三块理清了，space-y-4 才会老老实实听你指挥。
