Tailwind CSS 中的 spacing 详解

🔍 Tailwind CSS 中的 spacing 详解

spacing(间距)是 Tailwind CSS 里的一个核心概念,它主要用于控制 padding(内边距)、margin(外边距)、width(宽度)、height(高度) 等 CSS 属性。Tailwind 提供了一套默认的 spacing 值,同时允许你 自定义扩展


📌 1. Tailwind 的默认 spacing 规则

Tailwind 预定义了一组 spacing 值,通常基于 4px0.25rem)为单位递增:

js 复制代码
{
  spacing: {
    '0': '0px',
    '1': '0.25rem',  // 4px
    '2': '0.5rem',   // 8px
    '3': '0.75rem',  // 12px
    '4': '1rem',     // 16px
    '5': '1.25rem',  // 20px
    '6': '1.5rem',   // 24px
    '8': '2rem',     // 32px
    '10': '2.5rem',  // 40px
    '12': '3rem',    // 48px
    '16': '4rem',    // 64px
    '20': '5rem',    // 80px
    '24': '6rem',    // 96px
    '32': '8rem',    // 128px
    '40': '10rem',   // 160px
    '48': '12rem',   // 192px
    '56': '14rem',   // 224px
    '64': '16rem',   // 256px
  }
}

👉 这些数值可以直接用于 p-*m-*w-*h-* 等类名,例如:

html 复制代码
<div class="p-6 m-4 w-64 h-32 bg-blue-500">
  这个 div 具有 padding 1.5rem(24px)、margin 1rem(16px)、宽 16rem(256px)、高 8rem(128px)
</div>

📌 2. spacing 在 Tailwind 里的常见用法

🟢 padding(内边距)

html 复制代码
<div class="p-4">padding: 1rem(16px)</div>
<div class="pt-6">padding-top: 1.5rem(24px)</div>
<div class="px-8">padding-left & right: 2rem(32px)</div>

🟢 margin(外边距)

html 复制代码
<div class="m-2">margin: 0.5rem(8px)</div>
<div class="mt-10">margin-top: 2.5rem(40px)</div>
<div class="mx-12">margin-left & right: 3rem(48px)</div>

🟢 width & height(宽度 & 高度)

html 复制代码
<div class="w-32 h-16 bg-gray-200">width: 8rem(128px),height: 4rem(64px)</div>

📌 3. 如何扩展 spacing

如果默认值不够用,可以在 tailwind.config.js 里扩展:

js 复制代码
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',  // 288px
        '84': '21rem',  // 336px
        '96': '24rem',  // 384px
      },
    },
  },
};

这样,你可以使用 p-72w-96 等类名:

html 复制代码
<div class="p-72 w-96 bg-red-500">新的 spacing 规则生效!</div>

📌 4. theme("spacing.*") 用法

如果要在 CSS 里使用 spacing,可以用 theme() 函数:

css 复制代码
.btn {
  padding: theme("spacing.6");  /* 1.5rem (24px) */
  margin: theme("spacing.10");  /* 2.5rem (40px) */
}

🎯 结论

  1. Tailwind 预定义了一组 spacing(基于 4px 递增)。
  2. p-*m-*w-*h-* 等类名都基于 spacing 值。
  3. 可以在 tailwind.config.js扩展 spacing,而不是覆盖默认值。
  4. theme("spacing.*") 可以在 CSS 里引用 spacing 值。

Tailwind 让布局变得简单直观!

相关推荐
雪碧聊技术15 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了17 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
19891 小时前
【零基础学AI】第26讲:循环神经网络(RNN)与LSTM - 文本生成
人工智能·python·rnn·神经网络·机器学习·tensorflow·lstm
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html