Font Size

Tailwind-compatible

Class

Size

Preview

text-xs 0.75rem / 12pxThe quick brown fox jumps over the lazy dog

text-sm 0.875rem / 14pxThe quick brown fox jumps over the lazy dog

text-base 1rem / 16pxThe quick brown fox jumps over the lazy dog

text-lg 1.125rem / 18pxThe quick brown fox jumps over the lazy dog

text-xl 1.25rem / 20pxThe quick brown fox jumps over the lazy dog

text-2xl 1.5rem / 24pxThe quick brown fox jumps over the lazy dog

text-3xl 1.875rem / 30pxThe quick brown fox jumps

text-4xl 2.25rem / 36pxThe quick brown fox

text-5xl 3rem / 48pxThe quick brown

text-6xl 3.75rem / 60pxQuick brown

text-7xl 4.5rem / 72pxTypography

text-8xl 6rem / 96pxHeading

text-9xl 8rem / 128pxAa

Font Weight

9 weight classes

Thin

font-thin

Aa Bb Cc 123

Extra Light

font-extralight

Aa Bb Cc 123

Light

font-light

Aa Bb Cc 123

Normal

font-normal

Aa Bb Cc 123

Medium

font-medium

Aa Bb Cc 123

Semi Bold

font-semibold

Aa Bb Cc 123

Bold

font-bold

Aa Bb Cc 123

Extra Bold

font-extrabold

Aa Bb Cc 123

Black

font-black

Aa Bb Cc 123

HTML Headings

h1. Heading

2.5rem / 40px

h2. Heading

2rem / 32px

h3. Heading

1.75rem / 28px

h4. Heading

1.5rem / 24px

h5. Heading

1.25rem / 20px

h6. Heading

1rem / 16px

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Line Height (Leading)

leading-noneline-height: 1

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-tightline-height: 1.25

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-snugline-height: 1.375

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-normalline-height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-relaxedline-height: 1.625

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-looseline-height: 2

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Letter Spacing (Tracking)

tracking-tighter-0.05emGreenAdmin Dashboard

tracking-tight-0.025emGreenAdmin Dashboard

tracking-normal0emGreenAdmin Dashboard

tracking-wide0.025emGreenAdmin Dashboard

tracking-wider0.05emGreenAdmin Dashboard

tracking-widest0.1emGreenAdmin Dashboard

Text Transform

uppercasethe quick brown fox

lowercaseTHE QUICK BROWN FOX

capitalizethe quick brown fox

normal-caseThe Quick Brown Fox

Text Decoration

underlineThe quick brown fox

overlineThe quick brown fox

line-throughThe quick brown fox

no-underlineThe quick brown fox

Text Alignment

text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Style & Misc

italicThe quick brown fox jumps over the lazy dog

not-italicThe quick brown fox jumps over the lazy dog

truncateThe quick brown fox jumps over the lazy dog and keeps running far away

break-wordsSuperlongwordwithoutanyspacesorhyphenstotestbreaking

antialiasedSmooth text rendering

tabular-nums1,234,567.89 · 9,876,543.21

Copied!