使用 space- 設定 Item 間隔

雖然可以使用 gap 設定子層 item 間隔，但事實上 gap 目前只能在 Chrome 與 Firefox 正常執行，Safari 則尚未支援，但 space- 可在所有 Browser 都正常執行。

Version

Tailwind CSS 2.0.3

space000

各子層 item 有間隔，注意 1 之前並沒有間隔，而是貼齊父層 box。

space001

Safari 也能正常執行。

<template>
  <div class="flex space-x-5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>

第 2 行

<div class="flex space-x-5">

設定父層 box style：

有人笑稱 Tailwind 只是 class-name framework，只是將 CSS property 以 class-name 包裝而已，但 space- 就是個蠻特別的 hack，讓 gap 觀念在 Flexbox 可以跨 browser 使用