SuperAPI AI 工具集

tailwindcss-spacing

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:记录 Tailwind CSS 间距工具类的用法,用于设置元素外边距、内边距与子元素间距。

主要能力:

  • 外边距:m-{size} 四边、mx-* 水平、my-* 垂直、mt/mr/mb/ml 单边、-m-{size} 负外边距、m-auto 自动居中。
  • 内边距:p-{size} 四边、px-* 水平、py-* 垂直、pt/pr/pb/pl 单边。
  • 逻辑轴类(自 v4.2 起):mbs-/mbe-、pbs-/pbe-,行内轴对应 ms-/me-、ps-/pe-。
  • 子元素间距:space-x-{size} 与 space-y-{size},作用于 flex/grid 子元素之间。

间距刻度:v4.3 使用可配置刻度,--spacing 为基础单位,默认 0.25rem/4px。0 为 0,px 为 1px,0.5 为 calc(var(--spacing) * 0.5),1 为 var(--spacing),2、3、4、6、8、12、16 等按 calc(var(--spacing) * n) 计算。自 v4.3.1 起,-0 输出 0,-1 输出 var(--spacing),不再使用 calc()。

常用模式:mx-auto 居中容器;p-6 卡片内边距;flex space-x-4 横向排列子项;space-y-4 纵向堆叠段落。

适用场景:需要为布局设置统一间距、居中容器、卡片留白或子元素间隔时参考。

限制:资料未提供收费、平台支持范围或与其它版本的兼容性细节;具体行为以所用 Tailwind CSS 版本为准。