Guías Técnicas

Efectos, Formularios y Componentes en TailwindCSS

1Transición de color y escala

html 
<button class="bg-indigo-500 hover:bg-indigo-700 text-white px-4 py-2 rounded transform transition duration-300 hover:scale-105">
Hover mágico ✨
</button>

Botón índigo con texto blanco y bordes redondeados, que al pasar el ratón oscurece, se agranda ligeramente y muestra una transición suave.

  Nota

  • bg-indigo-500: fondo índigo (nivel 500).
  • hover:bg-indigo-700: cambia a un índigo más oscuro al pasar el ratón.
  • text-white: color de texto blanco.
  • px-4: padding horizontal de 1rem (16px).
  • py-2: padding vertical de 0.5rem (8px).
  • rounded: bordes redondeados.
  • transform: habilita las transformaciones CSS.
  • transition: activa las transiciones en los cambios de estado.
  • duration-300: duración de la transición de 300ms.
  • hover:scale-105: escala el botón al 105% al pasar el ratón.

2Opacidad dinámica

html 
<div class="bg-black opacity-50 hover:opacity-100 p-6 text-white rounded">
Caja con opacidad
</div>

Caja negra semitransparente con texto blanco, padding y bordes redondeados, que se vuelve totalmente opaca al pasar el ratón.

  Nota

  • bg-black: aplica un fondo negro.
  • opacity-50: establece la opacidad al 50%.
  • hover:opacity-100: cambia la opacidad al 100% al pasar el ratón.
  • p-6: padding interno de 1.5rem (24px) en todos los lados.
  • text-white: color de texto blanco.
  • rounded: bordes redondeados.

3Escalado y Sombra

html 
<div class="bg-blue-400 text-white p-6 rounded transform hover:scale-105 hover:shadow-lg transition duration-300">
Caja con efecto de escala y sombra
</div>

Caja azul con texto blanco, padding y bordes redondeados, que al pasar el ratón crece un poco, añade una sombra grande y lo hace con una transición suave.

  Nota

  • bg-blue-400: aplica un fondo azul (nivel 400).
  • text-white: color de texto blanco.
  • p-6: padding interno de 1.5rem (24px) en todos los lados.
  • rounded: bordes redondeados.
  • transform: habilita las transformaciones CSS.
  • hover:scale-105: escala el elemento un 5% más grande al pasar el ratón.
  • hover:shadow-lg: añade una sombra grande al pasar el ratón.
  • transition: habilita transiciones suaves en los cambios.
  • duration-300: la transición dura 300ms.

4Opacidad

html 
<div class="bg-green-500 text-white p-6 rounded opacity-75 hover:opacity-100 transition duration-300">
Caja con opacidad
</div>

Caja verde con texto blanco, padding y bordes redondeados, que inicia con 75% de opacidad y se vuelve totalmente visible al pasar el ratón con una transición suave.

  Nota

  • bg-green-500: aplica un fondo verde (nivel 500).
  • text-white: color de texto blanco.
  • p-6: padding interno de 1.5rem (24px) en todos los lados.
  • rounded: bordes redondeados.
  • opacity-75: establece la opacidad en 75%.
  • hover:opacity-100: cambia la opacidad al 100% al pasar el ratón.
  • transition: habilita transiciones suaves en los cambios.
  • duration-300: la transición dura 300ms.

Formularios

1Campo de formulario

html 
<form class="p-8 bg-gray-100 rounded-lg shadow-md">
<label class="block text-gray-700 font-bold mb-2" for="email">
  Correo Electrónico
</label>
<input class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
       id="email" type="email" placeholder="ejemplo@correo.com">
</form>

Formulario con un campo de correo, fondo gris, bordes redondeados y efecto azul al enfocar el input.

  Nota

  • block: Convierte la etiqueta en un elemento de bloque.
  • text-gray-700: Texto gris oscuro.
  • mb-2: Margen inferior.
  • w-full: Ancho completo.
  • px-3: Relleno horizontal.
  • py-2: Relleno vertical.
  • border: Borde estándar.
  • rounded-lg: Bordes redondeados.
  • focus:outline-none: Elimina el contorno de enfoque.

2Checkbox y Radio

html 
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox text-blue-600">
<span>Suscribirme</span>
</label>

<label class="flex items-center space-x-2">
<input type="radio" name="plan" class="form-radio text-green-600">
<span>Plan Básico</span>
</label>

Checkbox azul para “Suscribirme” y un radio verde para seleccionar “Plan Básico”, con etiquetas al lado.

  Nota

  • flex: convierte el contenedor en un flexbox.

  • items-center: alinea los elementos hijos verticalmente al centro.

  • space-x-2: agrega un espacio horizontal de 0.5rem (8px) entre los hijos.

  • form-checkbox: aplica estilos por defecto de Tailwind para checkboxes.

  • text-blue-600: color azul (nivel 600) en el checkbox.

  • form-radio: aplica estilos por defecto de Tailwind para radios.

  • text-green-600: color verde (nivel 600) en el radio.

1Menú simple

html 
<nav class="flex space-x-4 bg-gray-800 p-4 text-white">
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Inicio</a>
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Servicios</a>
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Contacto</a>
</nav>

Barra de navegación horizontal gris oscuro con enlaces blancos que cambian de fondo al pasar el mouse.

  Nota

  • flex: convierte el contenedor en un flexbox.

  • space-x-4: añade un espacio horizontal de 1rem (16px) entre los elementos hijos.

  • bg-gray-800: aplica un fondo gris muy oscuro.

  • p-4: padding interno de 1rem (16px) en todos los lados.

  • text-white: color de texto blanco.

  • hover:bg-gray-700: cambia el fondo a gris más claro al pasar el ratón.

  • p-2: padding interno de 0.5rem (8px).

  • rounded: bordes redondeados.

  • transition-colors: habilita la transición suave en cambios de color.

  • duration-300: duración de la transición de 300ms.

2Badge / Etiqueta

html 
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">
Nuevo
</span>

Badge pequeño azul con texto “Nuevo” y bordes redondeados.

  Nota

  • bg-blue-100: fondo azul muy claro.
  • text-blue-800: color de texto azul oscuro.
  • text-xs: tamaño de fuente extra pequeño.
  • font-semibold: peso de fuente seminegrita.
  • px-2: padding horizontal de 0.5rem (8px).
  • py-1: padding vertical de 0.25rem (4px).
  • rounded-full: bordes completamente redondeados (forma de píldora).

3Alertas

html 
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
<strong class="font-bold">Error:</strong>
<span class="block sm:inline">Algo salió mal.</span>
</div>

Alerta de error roja con el texto “Error: Algo salió mal.” y bordes redondeados.

  Nota

  • bg-red-100: fondo rojo muy claro.
  • border: aplica un borde de 1px sólido.
  • border-red-400: color del borde rojo (nivel 400).
  • text-red-700: color de texto rojo (nivel 700).
  • px-4: padding horizontal de 1rem (16px).
  • py-3: padding vertical de 0.75rem (12px).
  • rounded: bordes redondeados.
  • relative: establece un contexto de posicionamiento relativo.
  • font-bold: aplica un peso de fuente en negrita.
  • block: muestra el elemento como bloque (ocupa todo el ancho).
  • sm:inline: a partir de pantallas pequeñas (≥640px), muestra el elemento como inline.

4Ejemplo Completo

html 
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="h-48 w-full object-cover md:w-48" src="ejemplo.jpg" alt="Imagen">
  </div>
  <div class="p-8">
    <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Producto</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
      Nombre del producto
    </a>
    <p class="mt-2 text-gray-500">Descripción corta del producto aquí.</p>
    <button class="mt-4 bg-indigo-500 hover:bg-indigo-700 text-white px-4 py-2 rounded">
      Comprar ahora
    </button>
  </div>
</div>
</div>

Tarjeta de producto responsiva con imagen, título, descripción y botón de acción.

  Conclusión

  • max-w-md: ancho máximo de 28rem (448px).

  • mx-auto: centra el contenedor horizontalmente.

  • bg-white: fondo blanco.

  • rounded-xl: bordes extra grandes y redondeados.

  • shadow-md: sombra de tamaño medio.

  • overflow-hidden: oculta cualquier contenido que se salga del contenedor.

  • md:max-w-2xl: ancho máximo de 42rem (672px) en pantallas medianas (≥768px).

  • md:flex: en pantallas medianas o más grandes convierte el contenedor en flexbox.

  • md:flex-shrink-0: evita que el elemento se reduzca en pantallas medianas o más grandes.

  • h-48: altura fija de 12rem (192px).

  • w-full: ancho completo.

  • object-cover: ajusta la imagen para cubrir el contenedor sin deformarse.

  • md:w-48: ancho fijo de 12rem (192px) en pantallas medianas o más grandes.

  • p-8: padding interno de 2rem (32px).

  • uppercase: convierte el texto a mayúsculas.

  • tracking-wide: aumenta el espaciado entre letras.

  • text-sm: tamaño de fuente pequeña.

  • text-indigo-500: color de texto índigo (nivel 500).

  • font-semibold: peso de fuente seminegrita.

  • block: muestra el enlace como un elemento de bloque.

  • mt-1: margen superior de 0.25rem (4px).

  • text-lg: tamaño de fuente grande.

  • leading-tight: reduce el interlineado para texto ajustado.

  • font-medium: peso de fuente medio.

  • text-black: color de texto negro.

  • hover:underline: subraya el texto al pasar el ratón.

  • mt-2: margen superior de 0.5rem (8px).

  • text-gray-500: color de texto gris medio.

  • mt-4: margen superior de 1rem (16px).

  • bg-indigo-500: fondo índigo (nivel 500).

  • hover:bg-indigo-700: fondo índigo más oscuro al pasar el ratón.

  • text-white: color de texto blanco.

  • px-4: padding horizontal de 1rem (16px).

  • py-2: padding vertical de 0.5rem (8px).

  • rounded: bordes redondeados.