Stylepack

Schriften

Die Schriften von tailwindcss.com

tailwindcss.com setzt Überschriften und Fließtext in inter. inter ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Inter.

vor 4 Tagen auf tailwindcss.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
inter
Verwendet für
h1, h2, h3, body, button, code
Quelle
Selbst gehostet
Freie Alternative
Inter
plexMono
Verwendet für
label, code
Quelle
Selbst gehostet
Freie Alternative
Inter

CSS zum Nachbauen

Schrift-Variablen mit der freien Alternative im Font-Stack, damit dasselbe CSS mit und ohne die lizenzierte Schrift funktioniert.

: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;
}

So ist der Text gesetzt

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
Verwendete Schriftgrößen
1213141618364096

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

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

Fragen

Welche Schrift benutzt tailwindcss.com?

tailwindcss.com nutzt inter, plexMono. Überschriften sind in inter gesetzt, Fließtext in inter, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von tailwindcss.com frei nutzbar?

Nein. inter ist eine lizenzierte Schrift, die tailwindcss.com selbst ausliefert. Die nächste freie Alternative ist Inter, verfügbar auf Google Fonts. Das CSS auf dieser Seite setzt sie als Ersatz in den Font-Stack.

Wie bekomme ich dieselbe Typografie wie tailwindcss.com in mein Projekt?

Lade das Designpaket von tailwindcss.com bei Stylepack herunter: Es enthält den Font-Stack, die Schriftskala, jeden Textstil und die Screenshots, in einer Form, aus der ein KI-Coding-Agent wie Claude Code oder Cursor bauen kann.