Typography
scale ratio 1.239- Intercss: interdisplay + body400 500 60073%
- Plex Monocss: plexMonomono400 500 60026%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 96px | 400 | 1 | -0.05em |
| headline | Inter | 40px | 500 | 1 | -0.05em |
| title | Inter | 36px | 600 | 1.333 | 0em |
| body | Inter | 14px | 400 | 2 | 0em |
| body-sm | Plex Mono | 13px | 400 | 1.846 | 0em |
Type scale
Aa12Aa13Aa14Aa16Aa17Aa18Aa20Aa24Aa30Aa36Aa40Aa96
- Body size
- 14px / 2
- Display size
- 96px
- Display tracking
- -0.05em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.13:1
- Muted on bg
- 7.56:1
- Accent on bg
- 2.71:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 12
- 16
- 24
- 32
- 36
- 40
- 64
Corner radii
481216pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 160px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 16px
- height
- 40px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 600
card
- rounded
- 16px
- padding
- 28px
- backgroundColor
- #FFFFFF
input
- rounded
- 0px
- height
- 24px
- padding
- 0px 0px
Layout & motion
- Container
- 1360px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 10,345px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 350ms
- Transitions
- 175
- Keyframes
- 1
- Stack
- next.js, tailwind, shadcn/ui, mintlify, google-tag-manager, vercel, cloudflare
Page sections (5)
section labels are heuristic
02content?
03stats?Browse properties
04code sample?Ship faster and smaller.
05footerBuild whatever you want, without touching your CSS file.
How Tailwind CSS compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.24×: flatter than 67% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 20.1:1: higher than 78% of indexed sites (median 17.6:1).
- Page length
- 10,345px: longer than 69% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Plex Mono
- The only site in the index that loads Plex Mono.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Tailwind CSS use?
Tailwind CSS uses Inter (loaded as "inter") for headings and body text. Plex Mono (loaded as "plexMono") is used for code.
What are Tailwind CSS's brand colors?
Tailwind CSS's website uses a light scheme: background #FFFFFF, surface #FFFFFF1A, text #030712, muted text #4A5565 and borders #0307120D.
How is Tailwind CSS's website laid out?
The most common corner radius is 0px, body text is 14px with 2 line height, and the page container is 1360px wide.
