Stylepack

Fontes

As fontes que o tailwindcss.com usa

O tailwindcss.com usa inter nos títulos e no texto corrido. inter é uma fonte licenciada que o próprio site serve. A alternativa gratuita mais próxima no Google Fonts: Inter.

Medido no tailwindcss.com há 4 dias.

Abrir o pacote de design completoBaixar o pacote

Famílias de fontes

2 famílias
inter
Usada em
h1, h2, h3, body, button, code
Origem
Auto-hospedada
Alternativa gratuita
Inter
plexMono
Usada em
label, code
Origem
Auto-hospedada
Alternativa gratuita
Inter

CSS para reproduzir

Variáveis de fonte com a substituta gratuita na pilha, para que o mesmo CSS funcione com ou sem a fonte licenciada.

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

Como o texto é composto

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
Tamanhos de fonte em uso
1213141618364096

Para agentes de IA

O pacote é texto puro, sem chave: busque o DESIGN.md ou entregue o pacote inteiro ao Claude Code, Cursor ou Copilot pelo servidor MCP.

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

Perguntas

Qual fonte o tailwindcss.com usa?

O tailwindcss.com usa inter, plexMono. Os títulos são compostos em inter e o texto corrido em inter, medidos no site como ele é renderizado, não lidos da folha de estilos.

A fonte do tailwindcss.com é gratuita?

Não. inter é uma fonte licenciada que o próprio tailwindcss.com serve. A alternativa gratuita mais próxima é Inter, disponível no Google Fonts. O CSS desta página a coloca na pilha de fontes como substituta.

Como ter a mesma tipografia do tailwindcss.com no meu projeto?

Baixe o pacote de design do tailwindcss.com no Stylepack: ele traz a pilha de fontes, a escala tipográfica, todos os estilos de texto e as capturas de tela, em um formato que um agente de código com IA, como Claude Code ou Cursor, consegue usar para construir.