Tailwind Typography Scale
Generate a modular type ramp with rem/px specimens and v4 font-size and line-height tokens.
Enabling local controls…
Tailwind v4 workbench
Preview uses native CSS, not a Tailwind runtime. Every change updates the result locally. Text and settings stay in page memory.
Limits: 16,000 UTF-8 bytes per text area, 1,000 classes, 24 layout items, 8 cards/shadow layers, 20 × 12 table cells. No input HTML, scripts, URLs or commands execute.
Converters use common documented rules. Arbitrary values and modifier characters are preserved, but unknown tokens are marked unsupported. Real cascade, custom themes and plugins require a Tailwind build.
References checked: · Theme · Responsive design · v4 upgrade guide · Colors
Preview & output
Result updated locally. Review before using in your project.
small-2 · A clear typographic rhythm Aa
small-1 · A clear typographic rhythm Aa
base · A clear typographic rhythm Aa
large-1 · A clear typographic rhythm Aa
large-2 · A clear typographic rhythm Aa
large-3 · A clear typographic rhythm Aa
large-4 · A clear typographic rhythm Aa
large-5 · A clear typographic rhythm Aa
Mappings / reference (8)
| Token | px | rem | Line-height |
|---|---|---|---|
small-2 | 10.24 | 0.64 | 1.5 |
small-1 | 12.8 | 0.8 | 1.5 |
base | 16 | 1 | 1.5 |
large-1 | 20 | 1.25 | 1.5 |
large-2 | 25 | 1.5625 | 1.5 |
large-3 | 31.25 | 1.95313 | 1.5 |
large-4 | 39.0625 | 2.44141 | 1.5 |
large-5 | 48.82813 | 3.05176 | 1.5 |
Classes
Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.
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
Expand complete selectable text
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
Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.
<p class="text-type-small-2">small-2 · A clear typographic rhythm Aa</p> <p class="text-type-small-1">small-1 · A clear typographic rhythm Aa</p> <p class="text-type-base">base · A clear typographic rhythm Aa</p> <p class="text-type-large-1">large-1 · A clear typographic rhythm Aa</p> <p class="text-type-large-2">large-2 · A clear typographic rhythm Aa</p> <p class="text-type-large-3">large-3 · A clear typographic rhythm Aa</p> <p class="text-type-large-4">large-4 · A clear typographic rhythm Aa</p> <p class="text-type-large-5">large-5 · A clear typographic rhythm Aa</p>
Expand complete selectable text
<p class="text-type-small-2">small-2 · A clear typographic rhythm Aa</p> <p class="text-type-small-1">small-1 · A clear typographic rhythm Aa</p> <p class="text-type-base">base · A clear typographic rhythm Aa</p> <p class="text-type-large-1">large-1 · A clear typographic rhythm Aa</p> <p class="text-type-large-2">large-2 · A clear typographic rhythm Aa</p> <p class="text-type-large-3">large-3 · A clear typographic rhythm Aa</p> <p class="text-type-large-4">large-4 · A clear typographic rhythm Aa</p> <p class="text-type-large-5">large-5 · A clear typographic rhythm Aa</p>
@theme
Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.
@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;
}Expand complete selectable text
@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;
}How to use this tool
Edit the labelled controls to update a native CSS preview and copy or download Tailwind v4 output. Examples and reset stay in page memory.
When not to use it
No Tailwind runtime or full compiler. Converters support a documented common subset and list unknown utilities. Class conflicts and dark colors are suggestions requiring review in your built project. Input 16,000 UTF-8 bytes, 1,000 classes; no scripts or input HTML execute.