Stylepack

Botones

Los botones de tailwindcss.com

El botón principal de tailwindcss.com es #000000 con texto #ffffff, esquinas de 32px y 40px de alto. Abajo: cada variante de botón que usa el sitio, sus estados hover y foco, y el CSS para que los tuyos se vean igual.

Medido en tailwindcss.com hace 4 días.

Abrir el paquete de diseño completoDescargar el paquete

Botón primary

Get started
Hover
sin cambio visible
Foco
outline 1px auto rgb(16, 16, 16), offset 1px
Transición
all, 0s

Botón ghost

v4.3
Hover
sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que tailwindcss.com usa en sus botones.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 2px 6px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: "inter", sans-serif;
  cursor: pointer;
}

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

¿Cómo hago botones como los de tailwindcss.com?

Usa el CSS de esta página: el botón principal es #000000 con texto #ffffff, esquinas de 32px y 40px de alto. Añade las reglas de hover y foco que aparecen bajo cada variante y pon en el botón la fuente que usa tailwindcss.com.

¿De qué color son los botones de tailwindcss.com?

El botón principal de tailwindcss.com es #000000 con texto #ffffff. El sitio usa 2 variantes de botón en total; cada una está en esta página con su fondo, borde, radio y tamaño.

¿Puede un agente de programación con IA copiar los botones de tailwindcss.com?

Sí. El paquete de diseño de tailwindcss.com de Stylepack contiene cada variante de botón con sus estados, las fuentes, los colores y las capturas, así que Claude Code, Cursor o Copilot pueden construir botones que coincidan.