如何在Tailwind CSS中设置自定义水平/垂直内边距

首先明确基础规则：

• 水平内边距（左右两侧）使用px-前缀的工具类
• 垂直内边距（上下两侧）使用py-前缀的工具类

方案1：临时使用无需修改配置 #

如果只是个别场景需要非预设尺寸的内边距，直接用Tailwind的任意值语法即可，不需要改动配置文件：

<!-- 水平17px内边距 -->
<div class="px-[17px]">示例内容</div>
<!-- 垂直2.4rem内边距 -->
<div class="py-[2.4rem]">示例内容</div>
<!-- 同时设置水平、垂直自定义内边距 -->
<div class="px-[15px] py-[32px]">示例内容</div>

方括号内支持所有合法CSS长度单位，包括px、rem、vw、%等。

方案2：全局配置可复用的自定义内边距 #

如果需要在项目里重复使用固定的自定义内边距值，修改tailwind.config.js的extend节点即可，根据需求选以下任意一种配置方式：

方式一：扩展全局spacing（推荐） #

扩展spacing后，自定义的值不仅可以用于内边距，还能给外边距、宽高、定位偏移等所有调用间距体系的属性使用：

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      spacing: {
        // 格式：'类名后缀': '实际尺寸值'
        '18px': '18px',
        '15': '3.75rem',
        '0.5px': '0.5px'
      }
    },
  },
  plugins: [],
  content: [
    `components/**/*.{vue,js}`,
    `layouts/**/*.vue`,
    `pages/**/*.vue`,
    `composables/**/*.{js,ts}`,
    `plugins/**/*.{js,ts}`,
    `App.{js,ts,vue}`,
    `app.{js,ts,vue}`,
  ],
}

配置完成后直接调用对应类名即可：

<!-- 水平18px内边距 -->
<div class="px-18px"></div>
<!-- 垂直3.75rem内边距 -->
<div class="py-15"></div>

方式二：仅扩展padding配置 #

如果不希望自定义值污染全局间距体系，只给内边距加自定义值，可以直接扩展padding字段：

module.exports = {
  // 其余配置保持不变，仅修改extend部分
  theme: {
    extend: {
      padding: {
        'h-18': '18px',
        'v-32': '32px'
      }
    },
  },
  // plugins、content等其余配置和原文件一致
}

使用示例：

<div class="px-h-18 py-v-32"></div>

注意：修改配置文件后需要重启本地开发服务，新配置的工具类才会生效。

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