Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

DesignScan preview · https://tailwindcss.com · 2026-06-13

Colors

primary#f6339a
on-primary#111111
background#ffffff
text#030712
accent-1#4a5565
accent-2#90a1b9
on-accent-2#111111
border#ddd6ff
muted-surface#fefce8

Typography

display40px · 500 · lh 1
The quick brown fox jumps
headline-md30px · 500 · lh 1
The quick brown fox jumps
headline-sm24px · 500 · lh 1
The quick brown fox jumps
title20px · 500 · lh 1
The quick brown fox jumps
title-1818px · 500 · lh 1
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
label13px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl40px

Radius

xs4px
sm8px
md12px
lg16px
xl24px
2xl32px

Layout

sm320px
--breakpoint-sm640px
--breakpoint-md768px
--breakpoint-lg1024px
--breakpoint-xl1280px
--breakpoint-2xl1536px
containermax-width 1440px

Elevation

sm
md
lg
xl

Components

button-primary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge