01
Design Philosophy
Tailwind Is
Atomic composition: building visually rich components from simple utilities.
Strict scale constraint: spacing, radius, and shadows follow clean, pre-determined steps.
Responsive first: using prefix-based layout directives (e.g. `md:grid-cols-2`).
Tailwind Avoids
No arbitrary custom classes: colors and margins always align to the framework config.
No high-level component wrappers: components are composed natively on pages.
02
Color Palette
white
#ffffff
slate-50
#f8fafc
slate-200
#e2e8f0
slate-500
#64748b
slate-900
#0f172a
indigo-500
#6366f1
sky-400
#38bdf8
emerald-500
#10b981
| Token | Hex Value | Default Class | Role |
|---|---|---|---|
| --bg-base | #f8fafc | bg-slate-50 | Page light background |
| --bg-surface | #ffffff | bg-white | Card panel layers |
| --text-primary | #0f172a | text-slate-900 | Primary headings and titles |
| --text-secondary | #475569 | text-slate-600 | Standard body copy |
| --accent-indigo | #6366f1 | text-indigo-500 | CTA actions, active buttons |
| --success | #10b981 | text-emerald-500 | Active or positive indicators |
03
Typography
Rapid Prototyping.
Inter · 60px · font-extrabold · line-height 1
Composition over configuration
Inter · 30px · font-extrabold · line-height 1.2
Tailwind CSS works by scanning all of your HTML files for class names, generating the corresponding styles and then writing them to a static CSS file.
Inter · 16px · font-normal · line-height 1.5
| Element | Size Class | Weight Class | Font Stack |
|---|---|---|---|
| Hero Display | text-6xl (60px) | font-extrabold (800) | font-sans (Inter) |
| Headings H2 | text-3xl (30px) | font-bold (700) | font-sans (Inter) |
| Body Text | text-base (16px) | font-normal (400) | font-sans (Inter) |
| Captions | text-sm (14px) | font-medium (500) | font-sans (Inter) |
| Code Block | text-xs (12px) | font-normal (400) | font-mono (SF Mono) |
04
Spacing Scale
p-8 (32px)32px
p-6 (24px)24px
p-4 (16px)16px
p-2 (8px)8px
p-1 (4px)4px
05
Borders & Radius
| Class | Equivalent CSS Border | Equivalent CSS Radius |
|---|---|---|
| border + rounded-xl | 1px solid #e2e8f0 | 12px radius |
| border-2 + rounded-lg | 2px solid #e2e8f0 | 8px radius |
| border-0 + rounded-md | none | 6px radius |
| border + rounded-full | 1px solid #cbd5e1 | 999px (pill button) |
06
Card Components
Tailwind utility card
Responsive design, border shadows, custom hover transitions and atomic composition layouts.
Get Started →Active status tags:
Active tag
Inactive tag
Success
07
Motion Rules
| Transitions | Trigger | Equivalent Tailwind Class |
|---|---|---|
| Snappy hover color | Active buttons / tag toggle | transition-colors duration-150 ease-in-out |
| Scale hover lift | Database grid cards | transition-transform duration-200 ease-out hover:-translate-y-0.5 |
| Fading indicator | Menu transitions | transition-opacity duration-150 ease-in |