Ejemplos de Tailwind
30 patrones de utilidades de Tailwind CSS de uso habitual para tipografía, botones, tarjetas, formularios y más.
//
Busca en todas las páginas de la documentación
30 patrones de utilidades de Tailwind CSS de uso habitual para tipografía, botones, tarjetas, formularios y más.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Revisado por Chris St. John·Última actualización: 16 jul 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥