任何项目中最常见的设计问题之一是管理间距，这就是尾风填充的地方。 Tailwind提供了专门用于填充的一组公用事业课程，使开发人员可以灵活地控制间距，而无需编写自定义CSS的麻烦。在本指南中，我们将深入了解尾风填充的工作原理，探索可用选项，并演示如何将它们应用于现实世界项目。

[2

基本用法

在使用尾风填充时，重要的是要知道如何将填充物应用于元素的各个部分。通过为不同的侧面，轴或元素的各个侧面提供直接的实用类，从而简化了这一点。这是基本填充用例的快速分解：

将填充物添加到一侧

[2

您可以使用pt-*，pr-*，pb-*和pl-*的尾风的实用程序，以轻松地将填充物应用于元素的特定侧面。

代码：

例如：
PT-6在顶部添加1.5REM填充。

PR-4向右添加1REM。

pt-6
pr-4
pb-8
pl-2

PL-2向左添加0.5REM填充。

这些简单的类使您可以完全控制元素各个侧面的间距，从而可以进行更精确的设计调整。
• 添加水平填充
[2
• 要在元素中添加水平填充，tailwind提供了px-*实用程序类，该类别适用于元素的左侧和右侧。
• 代码：

例如：

PX-4在左侧和右侧都添加1REM填充。 PX-6向双方添加1.5REM。

这可以帮助您在设计上保持一致的水平间距，非常适合在

上都需要平衡填充的元素 左右，例如按钮或导航栏。

添加垂直填充 [2 要控制尾风中的垂直填充，您可以使用py-*实用程序类，该类别为元素的顶部和底部添加了相等的填充。

代码：

px-8

• 例如：
PY-4在顶部和底部添加1REM。

PY-8添加了垂直填充的2rem。

使用py-*是管理垂直间距的理想选择，尤其是在诸如平衡顶部和底部填充的容器或部分之类的元素中，可以增强可读性和布局结构。

在各个方面增加填充

[2

要在元素的所有侧面添加平等的填充，tailwind提供了p-*实用程序类，该类别将相同数量的填充物应用于顶部，右，底部和左侧。

代码：

例如：

py-8
 

p-8在整个元素上均匀地应用填充物。

此实用程序非常适合创建均匀间隔的元素，确保在内容周围保持一致的填充而无需手动指定双方。
• 使用逻辑属性
[2
• 代码：

PS-8

pe-8

PS-8

pe-8

例如：

PS-4在元素的开始中添加了1REM填充，这将是LTR中的左侧，RTL的右侧。

PE-6在元素的末端添加1.5REM，在LTR中向右映射，左图为RTL。

使用逻辑属性对于支持多种语言或需要动态布局调整的项目特别有用。 有条件地申请

tailwind填充允许您使用变体修饰符有条件地应用实用程序类。当您需要根据用户互动（例如悬停或焦点）修改样式或根据屏幕尺寸和媒体查询应用样式时，这将非常有用。

p-8

[2

您只有在某些状态（如悬停或焦点）处于活动状态时，才可以使用变体修饰符应用填充（或其他实用程序）。例如，悬停：py-8将在悬停元素时应用2REM的垂直填充。

• 代码：

在此示例中，该元素将具有1REM的基本填充，但是当您悬停在它上时，垂直填充会增加到2REM。

断点和媒体查询

[2

代码：

在此示例中，该元素将具有默认的填充，但是当屏幕大小到达中间断点（768px及以上）时，垂直填充将更改为2REM。 在逆风下使用自定义值
通过允许您修改默认间距刻度或应用一次任意值来修改默认间距刻度或应用一次性值，这提供了一种灵活的方法来自定义填充。当您需要超出默认标度的特定填充时，此功能非常有用。

自定义主题

  
ps-8
 
  
pe-8



  
ps-8
 
  
pe-8

示例：自定义间距刻度：

module.exports = { 主题： { 延长： { 间距：{ '5px'：'5px'， } } } }

• 这样，您可以在填充，保证金和其他间距实用程序中使用自定义间距值：
在这里应用5PX的定制填充！

另外，您只能扩展填充刻度：

module.exports = { 主题： { 延长： { 填充：{ '5px'：'5px'， } } } }

此方法将自定义隔离到填充而不更改更宽的间距量表。

任意值

如果您需要一个不适合预定义或扩展比例尺的唯一填充值，则tailwind可让您使用方括号应用任意值。这使您可以快速添加一次性自定义填充值，而无需修改tailwind.config.js文件。 [2

使用此方法，您可以通过在方括号内指定值来生成任何CSS属性。当您需要自定义间距不需要永久更改您的主题配置时，这一点特别有用。

结论

您可以使用悬停状态（悬停：PY-8）或响应式断点（MD：PY-8）有条件地应用填充。 tailwind还允许在tailwind.config.js或任意值（如p- [5px]）中进行自定义填充值。

  Hover over me to see the vertical padding increase!