Tailwind CSS
Rapidly build modern websites without leaving HTML
13 colors
16 components
Inter, Fira Code
Mar 20, 2026
Website Preview
Colors
Primary
#06B6D4
Primary accent (cyan-500)
#0F172A
Dark background (slate-900)
#38BDF8
Links, highlights (sky-400)
#F8FAFC
Primary text (slate-50)
#334155
Borders, muted elements (slate-700)
Neutral
#020617
Deepest background
#0F172A
Page background
#1E293B
Code block backgrounds
#475569
Secondary text
#94A3B8
Placeholder text
Semantic
#22C55E
Positive examples, green-500
#EF4444
Error examples, red-500
#EAB308
Warning examples, yellow-500
Typography
Inter
Role
SizeWeightHeight
Display
48px8001.1
Heading
30px7001.2
Body
16px4001.7
Small
14px4001.5
Fira Code
Role
SizeWeightHeight
Code
14px4001.6
DESIGN.md — Tailwind CSS
Overview
Tailwind's own design system practices what it preaches — utility-driven, carefully scaled, and optimized for developer documentation. A slate-to-cyan palette reflects technical precision paired with a friendly, approachable accent.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #06B6D4 | Primary accent (cyan-500) |
color-bg | #0F172A | Dark background (slate-900) |
color-sky | #38BDF8 | Links, highlights (sky-400) |
color-text | #F8FAFC | Primary text (slate-50) |
color-muted | #334155 | Borders, muted elements (slate-700) |
Neutral Palette
| Token | Hex | Usage |
|---|---|---|
slate-950 | #020617 | Deepest background |
slate-900 | #0F172A | Page background |
slate-800 | #1E293B | Code block backgrounds |
slate-600 | #475569 | Secondary text |
slate-400 | #94A3B8 | Placeholder text |
Semantic Colors
| Token | Hex | Usage |
|---|---|---|
color-success | #22C55E | Positive examples, green-500 |
color-error | #EF4444 | Error examples, red-500 |
color-warning | #EAB308 | Warning examples, yellow-500 |
Typography
| Role | Family | Size | Weight | Line Height |
|---|---|---|---|---|
| Display | Inter | 48px | 800 | 1.1 |
| Heading | Inter | 30px | 700 | 1.2 |
| Body | Inter | 16px | 400 | 1.7 |
| Small | Inter | 14px | 400 | 1.5 |
| Code | Fira Code | 14px | 400 | 1.6 |
Spacing
| Token | Value | Usage |
|---|---|---|
space-1 | 4px | Inline gaps |
space-2 | 8px | Tight spacing |
space-4 | 16px | Component spacing |
space-6 | 24px | Section gaps |
space-8 | 32px | Large gaps |
space-16 | 64px | Page sections |
Border Radius
| Token | Value | Usage |
|---|---|---|
radius-sm | 4px | Badges |
radius-md | 6px | Buttons |
radius-lg | 8px | Cards, code blocks |
radius-xl | 12px | Modals |
Elevation
| Level | Value | Usage |
|---|---|---|
shadow-sm | 0 1px 2px rgba(0,0,0,0.3) | Cards |
shadow-md | 0 4px 12px rgba(0,0,0,0.4) | Dropdowns |
shadow-lg | 0 8px 30px rgba(0,0,0,0.5) | Modals |
Components
Code Block
- Dark bg
#1E293B, cyan syntax highlights - Copy button top-right
- Language tab indicator
Documentation Nav
- Left sidebar, collapsible sections
- Active item with cyan left border
- Search input at top (Cmd+K)
Color Swatch Grid
- 11-step scale per color (50-950)
- Hover shows hex value + copy
- Grid layout with rounded corners
Do's and Don'ts
Do
- Use the slate scale for all neutral tones
- Pair cyan accent with sky blue for depth
- Show code examples for every component
Don't
- Don't use warm gray scales — always slate
- Don't use text smaller than 14px in docs
- Don't hide the code — it's the product