设置margin后Tailwind Pills组件小屏下仍粘连如何解决

Pills小屏状态堆叠粘连、已设置的margin失效，核心是父容器布局配置错误：

• 采用flex做横向排列时，如果父容器没加换行规则，小屏宽度不足以承载全部Pill的情况下，浏览器会强制压缩子元素宽度把所有元素挤在同一行，子元素设置的margin会随元素压缩被吞，视觉上就是粘连堆叠的效果。
• 单独给子元素加margin控制间距本身就存在缺陷：容易触发margin折叠、换行后边距错乱、压缩状态下边距失效，不是多换行适配场景下的最优间距方案。

• 第一步给Pills的父级flex容器加flex-wrap类，对应CSS属性flex-wrap: wrap，允许宽度不足时元素自动换行，基础布局逻辑修正后margin才会正常渲染。
• 第二步替换间距控制逻辑，删掉单个Pill上设置的margin，直接在父容器上加Tailwind的gap类控制间距：
  • 横向间距用gap-x-[数值]，纵向换行后的间距用gap-y-[数值]，比如常用的gap-x-3 gap-y-2就可以实现横向12px、纵向8px的均匀间距
  • gap是父容器级的间距控制属性，不会出现margin折叠、边距被压缩、首尾元素边距多余的问题，响应式适配稳定性远高于子元素单独加margin
• 如果之前是用inline-block实现的Pills布局，建议直接换成flex+gap方案，inline-block会把HTML标签间的空白字符解析为原生空格，小屏换行时很容易出现无规律的异常间距，排查成本很高。

注意：gap和子元素margin不要叠加使用，否则会出现间距翻倍的问题。

内容的提问来源于stack exchange，提问作者charmy