What fonts does Tailwind CSS use?

Measured from the captured homepage: Inter for headings and Inter for body copy.

Tailwind CSS website design referenceOpen full Tailwind CSS reference →

Observed typography

Heading font
Inter
Body font
Inter
System
One family across both roles

How the page is built

Tailwind CSS's captured homepage has 13 sections and 4 inner pages.

  • 6 content
  • 3 showcase
  • 2 features
  • 1 hero
  • 1 logos

Other sites that use this pair

94 other captured sites use this same pair of fonts.

Captured colors

The captured homepage uses these 6 colors, in capture order.

  • #24020b
  • #020005
  • #000000
  • #394d08
  • #1b010c
  • #3f1233

Styles recorded: Light.

Same category, same heading font

5 of the 67 other captured Developer Tools sites in this library use Inter for headings.

Tailwind CSS's website font choices

Captured September 21, 2026. Read it with the full reference, where the palette, section order and responsive views sit next to the type.

A single family or a two-font system?

Tailwind CSS sets headings and body in Inter, so the hierarchy comes from scale and weight.

Compare it across the library

See the website font trends and the font pairing examples.

Tailwind CSS fonts — FAQ

What font does Tailwind CSS use?

Tailwind CSS uses Inter for headings and Inter for body copy in the captured homepage.

Is Inter free to use?

Check the foundry license for Inter before shipping it. This page records what appeared on Tailwind CSS's site and grants no reuse rights.

What colors and sections were captured for Tailwind CSS?

6 colors (#24020b, #020005, #000000, #394d08, #1b010c, #3f1233) and 13 homepage sections, with 4 inner pages.

Which other sites use Inter and Inter?

94 other captured sites use this same pair of fonts. The links on this page go to the first ones in library order.

Fonts come from the rendered capture and may change when the site does. Library methodology