font inspectorWhat font does Tailwind CSS use?
Tailwind’s home page is a showcase built with its own framework. Almost half the text on it is code, so the monospaced font matters as much as the sans serif.
Short answer: The Tailwind CSS website uses Inter, as a variable font, for text and IBM Plex Mono for its many code samples. Both are open source and self-hosted.
Inter
Self-hosted59.2%- CSS name
inter- Weights
- 400, 500, 600, 700
- Sizes
- 96px · 40px · 36px · 24px · 18px · 16px · 14px · 12px
- Served from
- tailwindcss.com
IBM Plex Mono
Self-hosted40.8%- CSS name
plexMono- Weights
- 400, 500, 600
- Sizes
- 17px · 14px · 13px · 12px
- Served from
- tailwindcss.com
Sizes, weights and spacing by role
These are computed values from the live page, which is what the Font Inspector panel shows when you click each element.
| Role | Font | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|
| Headline | Inter | 96px | 400 | 1 | -0.05em |
| Subheading | Inter | 36px | 600 | 1.33 | normal |
| Body text | Inter | 16px | 400 | 1.75 | normal |
The main font stack in the CSS:
font-family: inter, "inter Fallback", system-ui;- The short lowercase names,
interandplexMono, and the “inter Fallback” face are whatnext/fontgenerates when it self-hosts a font. - The 96px headline is regular weight with very tight tracking, -0.05em.
- The CSS enables Inter’s character variants
cv02,cv03,cv04andcv11, which change the shapes of a few letters and numerals.
Check any site yourself in one click.
Sites change their type without notice. Font Inspector shows the rendered font, size, weight and spacing of any text on tailwindcss.com or anywhere else, and lists every font on the page. Free, no account.
About the fonts, and whether you can use them
Inter
The open source interface typeface by Rasmus Andersson, loaded as one variable file covering weights 100 to 900.
Can you use it? Yes. Inter is free under the SIL Open Font License.
On Google Fonts: Inter.
IBM Plex Mono
The monospaced member of IBM Plex, IBM’s open source corporate family, designed with Bold Monday.
Can you use it? Yes. IBM Plex is free under the SIL Open Font License, on Google Fonts.
On Google Fonts: IBM Plex Mono.
Finding a font does not license it. More in how to get a font you found, legally.
Get a similar look with a free font
This starter uses Inter, which is open source, with the sizes and spacing measured above. It is an approximation, not a copy of Tailwind CSS’s brand typeface.
/* Approximates the Tailwind CSS look with a free font */
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1 {
font-size: 6rem; /* 96px */
font-weight: 400;
line-height: 1;
letter-spacing: -0.05em;
}
p {
font-size: 1rem; /* 16px */
font-weight: 400;
line-height: 1.75;
}How we checked
We opened tailwindcss.com in Chrome on September 21, 2026 and read the computed styles of its visible text: the declared font stack, the font actually rendered, and how much of the page’s text each family sets. That is the same data the Font Inspector extension shows under Fonts on this page. We re-check these pages periodically, and the date above shows the last inspection.
Tailwind CSS and its typefaces are trademarks of their respective owners. Font Inspector is not affiliated with Tailwind CSS.
Questions & answers
What font does Tailwind CSS use on its website?+
The Tailwind CSS website uses Inter, as a variable font, for text and IBM Plex Mono for its many code samples. Both are open source and self-hosted.
Can I use the Tailwind CSS font?+
Yes. Inter is free under the SIL Open Font License.
How can I check what font Tailwind CSS uses myself?+
Open tailwindcss.com, then click any text with the Font Inspector extension, or right-click, choose Inspect and look at Rendered Fonts in the Computed tab. Sites change their typography, so checking the live page is the only way to be sure.