Stylepack

Fuentes

Las fuentes que usa tailwindcss.com

tailwindcss.com compone sus titulares y su texto de cuerpo en inter. inter es una fuente con licencia que el sitio sirve por su cuenta. La alternativa gratuita más parecida en Google Fonts: Inter.

Medido en tailwindcss.com hace 4 días.

Abrir el paquete de diseño completoDescargar el paquete

Familias tipográficas

2 familias
inter
Se usa para
h1, h2, h3, body, button, code
Origen
Autoalojada
Alternativa gratuita
Inter
plexMono
Se usa para
label, code
Origen
Autoalojada
Alternativa gratuita
Inter

CSS para reproducirlo

Variables de fuente con la alternativa gratuita en la pila, así el mismo CSS funciona con o sin la fuente con licencia.

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

Cómo se compone el texto

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
Tamaños de fuente en uso
1213141618364096

Para agentes de IA

El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.

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

Preguntas

¿Qué fuente usa tailwindcss.com?

tailwindcss.com usa inter, plexMono. Los titulares van en inter y el texto de cuerpo en inter, medido en el sitio tal como se renderiza, no leído de su hoja de estilos.

¿La fuente de tailwindcss.com es gratuita?

No. inter es una fuente con licencia que tailwindcss.com sirve por su cuenta. La alternativa gratuita más parecida es Inter, disponible en Google Fonts. El CSS de esta página la pone en la pila de fuentes como sustituta.

¿Cómo consigo la misma tipografía que tailwindcss.com en mi proyecto?

Descarga el paquete de diseño de tailwindcss.com en Stylepack: contiene la pila de fuentes, la escala tipográfica, cada estilo de texto y las capturas, en un formato con el que un agente de programación con IA como Claude Code o Cursor puede construir.