g3n-data
贊助EN
← 全部工具

Tailwind 間距尺度

查詢間距 utility、px 與 rem 數值，或產生自訂 v4 間距尺度。

tailwind-spacing-scale本機處理

正在啟用本機工具…

Tailwind v4 工作台

預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。

上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。

轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。

參考資料核對: · 主題 · 響應式設計 · v4 遷移指南 · 色彩

預覽與輸出

結果已在本機更新。套用至專案前請核對。

0 · 0px
0.5 · 2px
1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
24 · 96px

檢查提示

  • 小數 utility 使用動態 --spacing 基底；只有整數鍵會產生具名自訂屬性 token。
  • 預設尺度查詢：1rem = 16px；p-4、gap-4。上方自訂 base 獨立運作。
對照／參考 (11)
目前設定的 utility 對照與數值
鍵值rempxUtility
000p-0 / gap-0
0.50.1252p-0.5 / gap-0.5
10.254p-1 / gap-1
20.58p-2 / gap-2
30.7512p-3 / gap-3
4116p-4 / gap-4
61.524p-6 / gap-6
8232p-8 / gap-8
12348p-12 / gap-12
16464p-16 / gap-16
24696p-24 / gap-24
Classes

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

p-0 p-0.5 p-1 p-2 p-3 p-4 p-6 p-8 p-12 p-16 p-24
展開可選取的完整文字
p-0 p-0.5 p-1 p-2 p-3 p-4 p-6 p-8 p-12 p-16 p-24

HTML

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

<div><span>0 · 0px</span><div></div></div>
<div><span>0.5 · 2px</span><div></div></div>
<div><span>1 · 4px</span><div></div></div>
<div><span>2 · 8px</span><div></div></div>
<div><span>3 · 12px</span><div></div></div>
<div><span>4 · 16px</span><div></div></div>
<div><span>6 · 24px</span><div></div></div>
<div><span>8 · 32px</span><div></div></div>
<div><span>12 · 48px</span><div></div></div>
<div><span>16 · 64px</span><div></div></div>
<div><span>24 · 96px</span><div></div></div>
展開可選取的完整文字
<div><span>0 · 0px</span><div></div></div>
<div><span>0.5 · 2px</span><div></div></div>
<div><span>1 · 4px</span><div></div></div>
<div><span>2 · 8px</span><div></div></div>
<div><span>3 · 12px</span><div></div></div>
<div><span>4 · 16px</span><div></div></div>
<div><span>6 · 24px</span><div></div></div>
<div><span>8 · 32px</span><div></div></div>
<div><span>12 · 48px</span><div></div></div>
<div><span>16 · 64px</span><div></div></div>
<div><span>24 · 96px</span><div></div></div>

@theme

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
}
展開可選取的完整文字
@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
}

如何使用這個工具

調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。

不適合用在什麼情況

不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。