Polices

Les polices de tailwindcss.com

tailwindcss.com compose ses titres et son texte courant en inter. inter est une police sous licence que le site héberge lui-même. L’équivalent gratuit le plus proche sur Google Fonts : Inter.

Mesuré sur tailwindcss.com il y a 4 jours.

Familles de polices

2 familles
inter
Utilisée pour
h1, h2, h3, body, button, code
Origine
Auto-hébergée
Alternative gratuite
Inter
plexMono
Utilisée pour
label, code
Origine
Auto-hébergée
Alternative gratuite
Inter

Le CSS pour la reproduire

Variables de police avec l’équivalent gratuit dans la pile, pour que le même CSS fonctionne avec ou sans la police sous licence.

:root {
  --font-heading: "inter", "Inter", monospace; /* Inter stands in for inter */
  --font-body: "inter", "Inter", monospace; /* Inter stands in for inter */
  --font-mono: "inter", "Inter", monospace; /* Inter stands in for inter */
  --font-size-base: 14px;
}

Comment le texte est composé

headline-displayQuick brown foxinter / 96px / 400 / lh 96px / -4.8px
headline-lgQuick brown foxinter / 40px / 500 / lh 40px / -2px
headline-mdQuick brown foxinter / 36px / 600 / lh 48px
body-mdThe quick brown fox jumps over the lazy doginter / 14px / 400 / lh 28px
label-mdThe quick brown fox jumps over the lazy dogplexMono / 12px / 400 / lh 2
buttonThe quick brown fox jumps over the lazy doginter / 12px / 400 / lh 20px
codeconst pack = extract(url)plexMono / 13px / 400 / lh 24px
Tailles de police utilisées
1213141618364096

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

curl -s https://stylepack.ai/packs/tailwindcss.com/DESIGN.md

Questions

Quelle police utilise tailwindcss.com ?

tailwindcss.com utilise inter, plexMono. Les titres sont composés en inter et le texte courant en inter, mesurés sur le site tel qu’il s’affiche, pas lus dans sa feuille de style.

La police de tailwindcss.com est-elle gratuite ?

Non. inter est une police sous licence que tailwindcss.com héberge lui-même. L’équivalent gratuit le plus proche est Inter, disponible sur Google Fonts. Le CSS de cette page le place dans la pile de polices comme substitut.

Comment obtenir la même typographie que tailwindcss.com dans mon projet ?

Téléchargez le pack de design de tailwindcss.com sur Stylepack : il contient la pile de polices, l’échelle typographique, chaque style de texte et les captures, sous une forme qu’un agent de code IA comme Claude Code ou Cursor peut exploiter.