Ejemplos de Tailwind
30 patrones de utilidades de Tailwind CSS de uso habitual para tipografía, botones, tarjetas, formularios y más.
1. Encabezado grande y en negrita
Encabezado principal para títulos de página y secciones hero.
<h1 className="text-4xl font-bold text-gray-900">
Bienvenido a nuestra plataforma
</h1>Notas: Usa text-5xl o text-6xl para encabezados hero aún más grandes. Combínalo con tracking-tight para un espaciado entre letras más compacto en texto grande.
2. Subencabezado
Encabezado secundario para títulos de sección.
<h2 className="text-2xl font-semibold text-gray-700">
Primeros pasos
</h2>Notas: font-semibold (peso 600) es más ligero que font-bold (700) y funciona bien para encabezados secundarios.
3. Texto del cuerpo
Texto de párrafo estándar con altura de línea adecuada.
<p className="text-base leading-relaxed text-gray-600">
Este es un párrafo de texto del cuerpo con un espaciado de línea cómodo para facilitar la lectura.
</p>Notas: leading-relaxed (altura de línea 1.625) mejora la legibilidad. Usa text-gray-600 o text-gray-700 para el texto del cuerpo en lugar de negro puro.
4. Texto de leyenda pequeño
Texto pequeño, leyendas o metadatos.
<span className="text-sm text-gray-500">
Publicado el 15 de enero de 2024
</span>Notas: Usa text-xs para texto aún más pequeño, como marcas de tiempo o etiquetas.
5. Botón principal
Botón de llamada a la acción principal con estados hover y focus.
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Empezar
</button>Notas: Incluye siempre estados de focus para accesibilidad. ring-offset-2 crea espacio entre el anillo y el borde del botón.
6. Botón secundario
Botón menos prominente para acciones secundarias.
<button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
Saber más
</button>Notas: Usa borde y un estado hover sutil en lugar de un color de fondo sólido.
7. Botón de peligro
Botón para acciones destructivas (eliminar, quitar, etc.).
<button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
Eliminar cuenta
</button>Notas: El rojo indica peligro o acciones destructivas. Confirma siempre las acciones destructivas en tu lógica.
8. Botón deshabilitado
Botón en estado deshabilitado.
<button
disabled
className="cursor-not-allowed rounded-md bg-gray-300 px-4 py-2 text-sm font-medium text-gray-500"
>
Enviar
</button>Notas: cursor-not-allowed muestra el cursor de deshabilitado al pasar el ratón. Usa el atributo HTML disabled para accesibilidad.
9. Contenedor de tarjeta
Tarjeta básica con sombra y borde.
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<h3 className="text-lg font-semibold">Título de la tarjeta</h3>
<p className="mt-2 text-gray-600">El contenido de la tarjeta va aquí.</p>
</div>Notas: shadow-sm aporta profundidad sutil. Usa shadow-md o shadow-lg para tarjetas más prominentes.
10. Tarjeta con efecto hover
Tarjeta interactiva que se eleva al pasar el cursor.
<div className="cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
<h3 className="text-lg font-semibold">Tarjeta clicable</h3>
<p className="mt-2 text-gray-600">Pasa el cursor para ver el efecto.</p>
</div>Notas: transition-shadow anima suavemente el cambio de sombra. Añade cursor-pointer para indicar interactividad.
11. Input de texto
Input de formulario de texto estándar.
<input
type="text"
placeholder="Introduce tu nombre"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>Notas: focus:ring-1 y focus:border-blue-500 ofrecen una retroalimentación visual clara. w-full hace que el input ocupe todo su contenedor.
12. Input con etiqueta
Campo de formulario con etiqueta encima del input.
<div className="space-y-1">
<label className="block text-sm font-medium text-gray-700">
Dirección de correo electrónico
</label>
<input
type="email"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
</div>Notas: block hace que la etiqueta ocupe todo el ancho. space-y-1 añade espaciado consistente entre la etiqueta y el input.
13. Input con error
Input no válido con mensaje de error.
<div className="space-y-1">
<input
type="email"
className="w-full rounded-md border border-red-500 px-3 py-2 text-sm focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500"
/>
<p className="text-sm text-red-600">Introduce una dirección de correo electrónico válida.</p>
</div>Notas: El borde y el texto en rojo indican un error de validación. Proporciona siempre mensajes de error claros.
14. Área de texto
Input de texto multilínea.
<textarea
rows={4}
placeholder="Introduce tu mensaje"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
></textarea>Notas: Usa el atributo rows para controlar la altura. Los mismos estilos de focus que el input de texto para mantener consistencia.
15. Casilla de verificación
Casilla de verificación estilizada con etiqueta.
<label className="flex items-center space-x-2">
<input
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">Acepto los términos</span>
</label>Notas: flex items-center alinea la casilla y la etiqueta. text-blue-600 colorea el estado marcado.
16. Botón de radio
Botón de radio estilizado con etiqueta.
<label className="flex items-center space-x-2">
<input
type="radio"
name="plan"
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">Plan básico</span>
</label>Notas: Los botones de radio deben compartir siempre el mismo atributo name para agruparse.
17. Insignia
Etiqueta pequeña para estado o categorías.
<span className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
Nuevo
</span>Notas: rounded-full crea forma de píldora. Usa distintas combinaciones de color para diferentes tipos de insignia.
18. Alerta — Información
Caja de mensaje informativo.
<div className="rounded-md bg-blue-50 p-4">
<p className="text-sm text-blue-700">
Tu cuenta se ha verificado correctamente.
</p>
</div>Notas: Fondo claro con texto más oscuro de la misma familia de color. Usa border-l-4 border-blue-500 para añadir una franja de acento.
19. Alerta — Advertencia
Caja de mensaje de advertencia.
<div className="rounded-md bg-yellow-50 p-4">
<p className="text-sm text-yellow-800">
Tu suscripción caducará en 3 días.
</p>
</div>Notas: El amarillo indica advertencias o avisos importantes que requieren atención.
20. Alerta — Error
Caja de mensaje de error.
<div className="rounded-md bg-red-50 p-4">
<p className="text-sm text-red-700">
Hubo un error al procesar tu pago.
</p>
</div>Notas: Rojo para errores y fallos. Proporciona siempre información accionable en los mensajes de error.
21. Alerta — Éxito
Mensaje de confirmación de éxito.
<div className="rounded-md bg-green-50 p-4">
<p className="text-sm text-green-700">
Tus cambios se han guardado correctamente.
</p>
</div>Notas: El verde indica operaciones exitosas o retroalimentación positiva.
22. Enlace
Hipervínculo estilizado con efecto hover.
<a
href="/docs"
className="text-blue-600 underline decoration-1 underline-offset-2 hover:text-blue-800"
>
Lee la documentación
</a>Notas: underline-offset-2 añade espacio entre el texto y el subrayado. decoration-1 hace el subrayado más fino.
23. Enlace — Sin subrayado
Enlace sutil sin subrayado.
<a
href="/about"
className="text-blue-600 hover:underline"
>
Saber más
</a>Notas: El subrayado aparece solo al pasar el cursor. Patrón habitual en navegación y menús.
24. Separador
Regla horizontal de separación.
<hr className="my-8 border-t border-gray-200" />Notas: my-8 añade espaciado vertical. Usa colores de borde más claros (gray-200 o gray-300) para una separación sutil.
25. Avatar
Imagen de usuario circular.
<img
src="/avatar.jpg"
alt="Avatar del usuario"
className="h-10 w-10 rounded-full object-cover"
/>Notas: object-cover asegura que la imagen llene el círculo sin distorsión. Usa tamaños consistentes en toda tu aplicación.
26. Lista — Con viñetas
Lista desordenada estilizada.
<ul className="list-disc space-y-2 pl-5 text-gray-700">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>Notas: space-y-2 añade espaciado entre elementos. pl-5 sangra la lista.
27. Lista — Numerada
Lista ordenada estilizada.
<ol className="list-decimal space-y-2 pl-5 text-gray-700">
<li>Instalar dependencias</li>
<li>Configurar ajustes</li>
<li>Desplegar la aplicación</li>
</ol>Notas: El mismo patrón de espaciado que las listas con viñetas para consistencia visual.
28. Código en línea
Fragmento de código en línea.
<p className="text-gray-700">
Ejecuta <code className="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-pink-600">npm install</code> para empezar.
</p>Notas: font-mono usa fuente monoespaciada. El fondo claro distingue el código del texto circundante.
29. Bloque de código
Fragmento de código multilínea.
<pre className="overflow-x-auto rounded-lg bg-gray-900 p-4">
<code className="font-mono text-sm text-gray-100">
const greeting = "¡Hola, mundo!";{"\n"}
console.log(greeting);
</code>
</pre>Notas: overflow-x-auto habilita el desplazamiento horizontal para líneas largas. El fondo oscuro es habitual en bloques de código.
30. Texto de tooltip
Texto mostrado al pasar el cursor (tooltip solo con CSS).
<div className="group relative inline-block">
<button className="text-blue-600 underline decoration-dotted">
Pasa el cursor
</button>
<span className="invisible absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
Esto es un tooltip
</span>
</div>Notas: Usa group y group-hover: para un tooltip solo con CSS. whitespace-nowrap evita que el texto se parta en varias líneas. Para tooltips complejos, considera una biblioteca como Radix UI o Headless UI.
Relacionado
- Configuración — Instalación y configuración de Tailwind CSS v4
- Utilidades — Referencia completa de clases de utilidad
- Ejemplos de Grid — Patrones de layout con flexbox y grid
- Responsive — Patrones de diseño responsive
- Modo oscuro — Implementación del modo oscuro