填充

​基本用法

​向单边添加填充

使用 p{t|r|b|l}-{size} 实用程序控制元素的单边填充。

例如，pt-6 会向元素的顶部添加 1.5rem 的填充，pr-4 会向元素的右侧添加 1rem 的填充，pb-8 会向元素的底部添加 2rem 的填充，而 pl-2 会向元素的左侧添加 0.5rem 的填充。

<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

​添加水平填充

使用 px-{size} 实用程序控制元素的水平填充。

<div class="px-8 ...">px-8</div>

​添加垂直填充

使用 py-{size} 实用程序控制元素的垂直填充。

<div class="py-8 ...">py-8</div>

​在所有方向添加填充

使用 p-{size} 实用程序控制元素所有方向的填充。

<div class="p-8 ...">p-8</div>

​使用逻辑属性

使用 ps-* 和 pe-* 实用程序设置 padding-inline-start 和 padding-inline-end 逻辑属性，它们映射到根据文本方向的左侧或右侧。

<div dir="ltr">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>

<div dir="rtl">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>

为了获得更多控制，您还可以使用 LTR 和 RTL 修饰符 根据当前文本方向有条件地应用特定样式。

​有条件地应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:py-8 仅在悬停时应用 py-8 实用程序。

<div class="py-4 hover:py-8">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看 悬停、聚焦和其它状态 文档。

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、prefers-reduced-motion 等等。例如，使用 md:py-8 仅在中等屏幕尺寸及以上时应用 py-8 实用程序。

<div class="py-4 md:py-8">
  <!-- ... -->
</div>

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。

​使用自定义值

​自定义主题

默认情况下，Tailwind 的填充比例使用 默认间距比例。您可以通过编辑 theme.spacing 或 theme.extend.spacing 在您的 tailwind.config.js 文件中自定义您的间距比例。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

或者，您可以通过编辑 theme.padding 或 theme.extend.padding 在您的 tailwind.config.js 文件中自定义填充比例。

module.exports = {
  theme: {
    extend: {
      padding: {
        '5px': '5px',
      }
    }
  }
}

了解有关在 主题自定义 文档中自定义默认主题的更多信息。

​任意值

如果您需要使用一个不适合包含在主题中的 padding 值，请使用方括号使用任何任意值动态生成属性。

<div class="p-[5px]">
  <!-- ... -->
</div>

了解有关在 任意值 文档中支持任意值的更多信息。