Space Between (元素間距)

增添子元素的水平間距

用 space-x-{amount} 功能來控制子元素之間水平方向的距離。

增添子元素的垂直間距

用 space-y-{amount} 功能來控制子元素之間垂直方向的距離。

相反順序的子元素

如果你的元素順序反轉了 (使用 flex-row-reverse 或 flex-col-reverse)，請使用 space-x-reverse 或 space-y-reverse 功能來確保每個元素的間距都被增加在正確的方向。

限制

這個功能只是一個在「除了第一個之外的所有項目」群組內增加外距的捷徑，它並非是設計來處理包裝過的排版，像是網格 (grids)、「子元素以非 DOM 自然排列的自定義複雜順序呈現」等複雜案例。

如果是那些情況，可以的話最好是使用間隙功能，或為每一個元素增加外距，並在父元素中增加匹配好的負外距：

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

Cannot be paired with divide utilities

The space-* utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.

響應式

如要讓子元素的間距有響應式效果，可在現有元素間距功能前加上前綴詞 {screen}:。例如：使用 md:space-x-8 可以在中型或以上的螢幕尺寸套用 space-x-8 的功能。

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

更多有關 Tailwind 響應式設計功能的資訊，可參考 響應式設計 文件。

客製化

元素間距的尺寸

如果你想把自訂的數值一次設定在 padding、margin、width 以及 height 上的話，請在你的 tailwind.config.js 檔案中使用 theme.spacing 區段裡自訂。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

只想要自訂元素間距的數值，請在你的 tailwind.config.js 檔案中的 theme.space 區段裡自訂。

  // tailwind.config.js
  module.exports = {
    theme: {
      space: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

更多有關自訂預設主題的資訊，可參考 theme customization documentation。

變化模式

默認情況下, 只有 響應式 的 space 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 space 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       space: ['responsive', 'hover'],
      }
    }
  }

停用

如果你不打算在專案中使用 space 功能，可以在你的設定檔裡的 corePlugins 屬性中將 space 設定為 false 來停用功能：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     space: false,
    }
  }