如何使用TailwindCSS快速设置间距和排版

在前端页面开发过程中，间距和排版是样式调整的核心需求，传统方式需要手动编写大量CSS规则来实现元素的外边距、内边距、行高、字间距等效果。TailwindCSS作为实用优先的CSS框架，提供了一系列开箱即用的间距工具类和排版工具类，开发者可以直接在HTML元素上添加对应类名，快速完成样式设置，大幅提升开发效率。

TailwindCSS间距工具类基础用法

TailwindCSS的间距工具类基于预设的间距尺度生成，默认间距尺度从0到96，每个数值对应不同的像素值，同时支持负数间距设置。

外边距工具类

外边距工具类以m为前缀，结合方向后缀使用，具体规则如下：

• m-{数值}：设置四个方向的外边距
• mt-{数值}：设置上外边距
• mr-{数值}：设置右外边距
• mb-{数值}：设置下外边距
• ml-{数值}：设置左外边距
• mx-{数值}：设置水平方向外边距
• my-{数值}：设置垂直方向外边距

以下是外边距工具类的使用示例：

<!-- 设置四个方向外边距为16px -->
<div class="m-4">外边距示例</div>
<!-- 设置上外边距为8px，下外边距为16px -->
<div class="mt-2 mb-4">单方向外边距示例</div>
<!-- 设置水平外边距自动，实现水平居中 -->
<div class="mx-auto w-64">水平居中示例</div>
<!-- 设置负数左外边距 -->
<div class="ml-[-8px]">负数间距示例</div>

内边距工具类

内边距工具类以p为前缀，方向规则与外边距一致：

• p-{数值}：设置四个方向的内边距
• pt-{数值}：设置上内边距
• pr-{数值}：设置右内边距
• pb-{数值}：设置下内边距
• pl-{数值}：设置左内边距
• px-{数值}：设置水平方向内边距
• py-{数值}：设置垂直方向内边距

内边距工具类使用示例：

<!-- 设置四个方向内边距为12px -->
<div class="p-3 bg-gray-100">内边距示例</div>
<!-- 设置水平内边距为16px，垂直内边距为8px -->
<div class="px-4 py-2 bg-blue-50">组合内边距示例</div>

TailwindCSS排版工具类用法

排版工具类主要控制文字相关的样式，包括字号、行高、字间距、文本对齐等属性。

基础排版工具类

常用的基础排版工具类如下：

排版工具类使用示例：

<!-- 设置字号为18px，行高为1.625，字间距加宽 -->
<p class="text-lg leading-relaxed tracking-wide">
  这是一段使用TailwindCSS排版工具类设置的文本，字号更大，行高更宽松，字间距也做了调整。
</p>
<!-- 设置标题居中对齐，字号为24px -->
<h2 class="text-2xl text-center font-bold">居中标题示例</h2>

间距与排版组合应用

实际开发中可以将间距工具类和排版工具类组合使用，快速实现卡片等组件的样式：

<div class="p-6 mx-auto max-w-md bg-white rounded-lg shadow-md">
  <h3 class="text-xl font-semibold mb-4">卡片标题</h3>
  <p class="text-base leading-normal text-gray-600 mb-3">
    卡片内容区域，使用mb-3设置段落下方的间距，行高设置为正常比例，文字颜色为灰色。
  </p>
  <p class="text-base leading-normal text-gray-600">
    这是卡片的第二个段落，与上方段落保持一致的排版样式，间距由mb-3控制。
  </p>
</div>

自定义间距和排版尺度

如果默认的间距和排版尺度无法满足需求，可以在tailwind.config.js文件中自定义扩展：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 扩展间距尺度
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      // 扩展字号
      fontSize: {
        '7xl': '4.5rem',
      },
      // 扩展行高
      lineHeight: {
        'extra-loose': '2',
      }
    }
  }
}

自定义完成后就可以在项目中使用新增的工具类，比如m-128、text-7xl等。

注意事项

• 间距工具类的数值对应的是预设的间距尺度，默认1单位等于4px，比如m-4对应16px，如果需要自定义像素值可以直接使用方括号语法，比如m-[18px]。
• 排版工具类的text-{数值}同时控制字号和行高，如果需要单独调整行高可以额外添加leading-前缀的类。
• 使用间距工具类时避免多个冲突的类同时作用于同一个元素，比如同时设置m-4和mt-2，上外边距会被mt-2覆盖。

TailwindCSS间距工具类排版设置CSS布局修改时间：2026-06-26 00:57:37