g3n-data
贊助EN
← 全部工具

Tailwind 字級尺度

產生模組化字級尺度、rem／px 字樣預覽及 v4 字級與行高 tokens。

tailwind-typography-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 遷移指南 · 色彩

預覽與輸出

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

small-2 · 清楚的文字節奏 Aa

small-1 · 清楚的文字節奏 Aa

base · 清楚的文字節奏 Aa

large-1 · 清楚的文字節奏 Aa

large-2 · 清楚的文字節奏 Aa

large-3 · 清楚的文字節奏 Aa

large-4 · 清楚的文字節奏 Aa

large-5 · 清楚的文字節奏 Aa

對照／參考 (8)
目前設定的 utility 對照與數值
Tokenpxrem行高
small-210.240.641.5
small-112.80.81.5
base1611.5
large-1201.251.5
large-2251.56251.5
large-331.251.953131.5
large-439.06252.441411.5
large-548.828133.051761.5
Classes

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

text-type-small-2 text-type-small-1 text-type-base text-type-large-1 text-type-large-2 text-type-large-3 text-type-large-4 text-type-large-5
展開可選取的完整文字
text-type-small-2 text-type-small-1 text-type-base text-type-large-1 text-type-large-2 text-type-large-3 text-type-large-4 text-type-large-5

HTML

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

<p class="text-type-small-2">small-2 · 清楚的文字節奏 Aa</p>
<p class="text-type-small-1">small-1 · 清楚的文字節奏 Aa</p>
<p class="text-type-base">base · 清楚的文字節奏 Aa</p>
<p class="text-type-large-1">large-1 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-2">large-2 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-3">large-3 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-4">large-4 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-5">large-5 · 清楚的文字節奏 Aa</p>
展開可選取的完整文字
<p class="text-type-small-2">small-2 · 清楚的文字節奏 Aa</p>
<p class="text-type-small-1">small-1 · 清楚的文字節奏 Aa</p>
<p class="text-type-base">base · 清楚的文字節奏 Aa</p>
<p class="text-type-large-1">large-1 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-2">large-2 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-3">large-3 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-4">large-4 · 清楚的文字節奏 Aa</p>
<p class="text-type-large-5">large-5 · 清楚的文字節奏 Aa</p>

@theme

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

@import "tailwindcss";

@theme {
  --text-type-small-2: 0.64rem;
  --text-type-small-2--line-height: 1.5;
  --text-type-small-1: 0.8rem;
  --text-type-small-1--line-height: 1.5;
  --text-type-base: 1rem;
  --text-type-base--line-height: 1.5;
  --text-type-large-1: 1.25rem;
  --text-type-large-1--line-height: 1.5;
  --text-type-large-2: 1.5625rem;
  --text-type-large-2--line-height: 1.5;
  --text-type-large-3: 1.95313rem;
  --text-type-large-3--line-height: 1.5;
  --text-type-large-4: 2.44141rem;
  --text-type-large-4--line-height: 1.5;
  --text-type-large-5: 3.05176rem;
  --text-type-large-5--line-height: 1.5;
}
展開可選取的完整文字
@import "tailwindcss";

@theme {
  --text-type-small-2: 0.64rem;
  --text-type-small-2--line-height: 1.5;
  --text-type-small-1: 0.8rem;
  --text-type-small-1--line-height: 1.5;
  --text-type-base: 1rem;
  --text-type-base--line-height: 1.5;
  --text-type-large-1: 1.25rem;
  --text-type-large-1--line-height: 1.5;
  --text-type-large-2: 1.5625rem;
  --text-type-large-2--line-height: 1.5;
  --text-type-large-3: 1.95313rem;
  --text-type-large-3--line-height: 1.5;
  --text-type-large-4: 2.44141rem;
  --text-type-large-4--line-height: 1.5;
  --text-type-large-5: 3.05176rem;
  --text-type-large-5--line-height: 1.5;
}

如何使用這個工具

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

不適合用在什麼情況

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