Guías Técnicas

Dominando los Fundamentos de Tailwindcss

Aprender las utilidades esenciales de TailwindCSS es fundamental para dominar el framework y crear interfaces de usuario modernas y responsivas de manera práctica y rápida.

Fondos y Bordes

1Botón básico

html 
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Mi Botón
</button>

Botón azul con texto blanco, negrita, padding y bordes redondeados que oscurece al pasar el ratón.

  Importante

  • bg-blue-500: Fondo azul (nivel 500).
  • hover:bg-blue-700: Cambia a azul oscuro al pasar el ratón (nivel 700).
  • text-white: Color del texto blanco.
  • font-bold: Texto en negrita.
  • py-2: Relleno vertical de 2 unidades.
  • px-4: Relleno horizontal de 4 unidades.
  • rounded: Bordes redondeados.

2Tarjeta con sombra

html 
<div class="bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-xl font-semibold mb-2">Título</h2>
<p class="text-gray-600">Contenido de la tarjeta</p>
</div>

Tarjeta blanca con padding, bordes redondeados, sombra, título destacado y texto descriptivo en gris.

  Nota

  • bg-white: Fondo blanco.
  • p-6: Relleno en todos los lados.
  • rounded-lg: Bordes grandes redondeados.
  • shadow-xl: Sombra grande.

3Borde destacado (Contenedor con borde)

html 
<div class="border border-red-500 p-4 rounded">
Caja con borde rojo
</div>

Caja con borde rojo, padding interno y esquinas redondeadas.

  Nota

  • border: Aplica un borde sólido de 1px en todos los lados del elemento.
  • border-red-500: Cambia el color del borde a rojo (nivel 500) dentro de la escala de Tailwind.
  • p-4: Agrega padding (relleno interno) de 1rem (16px) en todos los lados del elemento.
  • rounded: Aplica bordes redondeados con un radio pequeño por defecto.

Tipografía y Texto en Tailwindcss

1Título principal

html 
<h1 class="text-4xl font-extrabold text-gray-800">Bienvenido a la guía</h1>

Título grande en gris oscuro con fuente muy gruesa (extra bold).

  Nota

text-4xl: Tamaño de fuente extra grande. font-extrabold: Peso de la fuente extra-bold. text-gray-800: Color del texto gris oscuro (nivel 800).

2Párrafo de texto

html 
<p class="text-base text-gray-600 leading-relaxed">
TailwindCSS es un framework de utilidades muy útil para crear diseños rápidos.
</p>

Párrafo de tamaño base, color gris medio y con interlineado relajado para mejor lectura.

  Nota

text-base: Tamaño de fuente por defecto. text-gray-600: Color del texto gris. leading-relaxed: Espaciado entre líneas relajado.

3Texto estilizado (Texto capitalizado)

html 
<p class="uppercase tracking-widest text-xs text-blue-500">Etiqueta</p>

Etiqueta en mayúsculas, muy pequeña, con espaciado amplio entre letras y color azul.

  Nota

uppercase: Transforma el texto a mayúsculas. tracking-widest: Aumenta el espaciado entre letras. text-xs: Tamaño de fuente extra-pequeño. text-blue-500: Color del texto azul con nivel de 500.

4Enlace con subrayado

html 
<a href="#" class="text-blue-500 hover:underline">
Ir a la documentación
</a>

Enlace azul que se subraya al pasar el ratón.

  Nota

text-blue-500: pinta el texto de azul (nivel 500). hover:underline: subraya el texto al pasar el ratón.

Espaciado y Tamaños

1Márgenes y relleno

html 
<div class="m-8 p-4 bg-gray-100">Caja con margen y relleno</div>

Caja con margen externo amplio, padding interno y fondo gris claro.

  Nota

m-8: agrega un margen externo de 2rem (32px) en todos los lados.
p-4: agrega un padding interno de 1rem (16px) en todos los lados.
bg-gray-100: aplica un fondo gris muy claro.

2Imagen centrada

html 
<img src="ejemplo.jpg" class="w-64 h-auto mx-auto rounded-lg shadow-md">

Imagen centrada, con ancho fijo, altura proporcional, bordes redondeados y sombra media.

  Nota

w-64: ancho fijo de 16rem (256px).
h-auto: ajusta la altura automáticamente manteniendo la proporción.
mx-auto: centra la imagen horizontalmente.
rounded-lg: aplica bordes redondeados grandes.
shadow-md: agrega una sombra de tamaño medio.

3Espaciado vertical (Espaciado entre elementos)

html 
<div class="space-y-4">
<p>Elemento 1</p>
<p>Elemento 2</p>
<p>Elemento 3</p>
</div>

Contenedor con varios elementos apilados verticalmente y separados por un espacio uniforme.

space-y-4: agrega un espacio vertical de 1rem (16px) entre los elementos hijos.

4Ancho fijo

html 
<div class="w-64 bg-blue-200 p-4 rounded">
Caja con ancho fijo de 16rem (256px)
</div>

Caja azul claro con ancho fijo, padding interno y bordes redondeados.

  Nota

w-64: fija el ancho a 16rem (256px).
bg-blue-200: color de fondo azul claro.
p-4: padding interno de 1rem (16px).
rounded: bordes redondeados.

Flexbox y Grid

1Flexbox básico

html 
<div class="flex items-center justify-between bg-gray-200 p-4 rounded">
<span class="font-medium">Título</span>
<button class="bg-green-500 hover:bg-green-700 text-white px-3 py-1 rounded-full">
  Acción
</button>
</div>

Contenedor flex con fondo gris, contenido alineado al centro y distribuido a los extremos, que incluye un título y un botón verde con bordes en forma de píldora.

  Nota

flex: convierte el contenedor en un flexbox.
items-center: alinea los elementos hijos verticalmente al centro.
justify-between: distribuye los elementos dejando espacio entre ellos.
bg-gray-200: fondo gris claro.
p-4: padding interno de 1rem (16px) en todos los lados.
rounded: bordes redondeados.
font-medium: aplica un peso de fuente medio.
bg-green-500: fondo verde (nivel 500).
hover:bg-green-700: cambia a un verde más oscuro al pasar el ratón.
text-white: color de texto blanco.
px-3: padding horizontal de 0.75rem (12px).
py-1: padding vertical de 0.25rem (4px).
rounded-full: bordes totalmente redondeados (forma de píldora).

2Grid responsivo

html 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-yellow-200 p-4 rounded">Item 1</div>
<div class="bg-red-200 p-4 rounded">Item 2</div>
<div class="bg-purple-200 p-4 rounded">Item 3</div>
<div class="bg-blue-200 p-4 rounded">Item 4</div>
</div>

Cuadrícula responsiva que muestra 1, 2 o 4 columnas según el tamaño de pantalla, con ítems de colores, padding y bordes redondeados.

  Nota

grid: convierte el contenedor en un grid.
grid-cols-1: establece 1 columna por defecto en pantallas pequeñas.
md:grid-cols-2: establece 2 columnas en pantallas medianas (≥768px).
lg:grid-cols-4: establece 4 columnas en pantallas grandes (≥1024px).
gap-6: añade un espacio de 1.5rem (24px) entre las celdas del grid.
bg-yellow-200: fondo amarillo claro.
bg-red-200: fondo rojo claro.
bg-purple-200: fondo púrpura claro.
bg-blue-200: fondo azul claro.
p-4: padding interno de 1rem (16px).
rounded: bordes redondeados.

3Elemento Flex flex-grow (el elemento crece para llenar el espacio disponible)

html 
<div class="flex bg-gray-200 p-4 space-x-2">
<div class="bg-blue-300 p-2">Caja 1</div>
<div class="bg-green-300 p-2 flex-grow">Caja 2 (crece)</div>
<div class="bg-red-300 p-2">Caja 3</div>
</div>

Contenedor flex con fondo gris y separación entre cajas, donde la segunda caja se expande para ocupar el espacio restante. La Caja 2 se expande y ocupa todo el espacio restante.

  Nota

flex: convierte el contenedor en un flexbox.
bg-gray-200: fondo gris claro.
p-4: padding interno de 1rem (16px).
space-x-2: añade un espacio horizontal de 0.5rem (8px) entre los hijos.
bg-blue-300: fondo azul claro (nivel 300).
p-2: padding interno de 0.5rem (8px).
bg-green-300: fondo verde claro (nivel 300).
p-2: padding interno de 0.5rem (8px).
flex-grow: permite que el elemento crezca y ocupe el espacio restante disponible.
bg-red-300: fondo rojo claro (nivel 300).
p-2: padding interno de 0.5rem (8px).

4Posición de un elemento absolute, top-0, left-0 (posición absoluta)

html 
<div class="relative bg-gray-100 h-32 w-64 border">
<div class="absolute top-0 left-0 bg-red-400 text-white px-2 py-1">
  Posicionado arriba a la izquierda
</div>
</div>

Contenedor con fondo gris, tamaño fijo y borde, dentro del cual hay una caja roja posicionada en la esquina superior izquierda.

El elemento rojo se coloca en la esquina superior izquierda del contenedor.

  Nota

relative: establece que el contenedor padre use posicionamiento relativo (necesario para posicionar hijos absolutos).
bg-gray-100: aplica un fondo gris muy claro.
h-32: altura fija de 8rem (128px).
w-64: ancho fijo de 16rem (256px).
border: añade un borde de 1px sólido en todos los lados.

absolute: posiciona el elemento de forma absoluta respecto al contenedor padre.
top-0: lo coloca en la parte superior (0).
left-0: lo coloca en la parte izquierda (0).
bg-red-400: fondo rojo (nivel 400).
text-white: color de texto blanco.
px-2: padding horizontal de 0.5rem (8px).
py-1: padding vertical de 0.25rem (4px).

5Efectos y Transiciones

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.

Estilos Responsivos

1Contenedor adaptativo

html 
<div class="container mx-auto sm:p-4 md:p-8 lg:p-12">
Contenedor con padding responsivo
</div>

Contenedor centrado que ajusta su ancho automáticamente y aplica distinto nivel de padding según el tamaño de la pantalla.

  Nota

container: establece un ancho máximo adaptado al tamaño de pantalla.
mx-auto: centra el contenedor horizontalmente con márgenes automáticos.
sm:p-4: padding de 1rem (16px) en pantallas pequeñas (≥640px).
md:p-8: padding de 2rem (32px) en pantallas medianas (≥768px).
lg:p-12: padding de 3rem (48px) en pantallas grandes (≥1024px).

2Visibilidad condicional

html 
<p class="hidden md:block text-green-600">Texto visible solo en pantallas medianas o más grandes</p>

Párrafo verde que está oculto en pantallas pequeñas y solo aparece en pantallas medianas o más grandes.

Aquí el párrafo se oculta en pantallas pequeñas y se muestra solo a partir de pantallas medianas (≥768px), con texto en color verde.

  Nota

hidden: oculta el elemento por defecto.
md:block: muestra el elemento como bloque en pantallas medianas (≥768px) y superiores.
text-green-600: aplica un color de texto verde (nivel 600).

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. focus:shadow-outline: Añade una sombra de contorno al enfocarse.

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.