Guías Técnicas

Fundamentos Básicos 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.

Breakpoints y Responsive

TailwindCSS utiliza breakpoints para aplicar estilos específicos en diferentes tamaños de pantalla. Estos breakpoints se basan en una escala de ancho que va desde 40rem (640px) hasta 96rem (1536px), dividiéndose en cinco puntos clave:

BreakpointPrefijoMínimo anchoCSS
smsm:40rem (640px)@media (width >= 40rem) { ... }
mdmd:48rem (768px)@media (width >= 48rem) { ... }
lglg:64rem (1024px)@media (width >= 64rem) { ... }
xlxl:80rem (1280px)@media (width >= 80rem) { ... }
2xl2xl:96rem (1536px)@media (width >= 96rem) { ... }

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

1Enlace 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.

2Tí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).

3Pá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.

4Texto 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.

5Tamaños de fuente

html 
<p class="text-xs">Muy pequeñita</p>
<p class="text-sm">Pequeña</p>
<p class="text-base">Normalita (default)</p>
<p class="text-lg">Más grandecita</p>
<p class="text-xl">Grande</p>
<p class="text-2xl">Más grande</p>
<p class="text-4xl">Gigante</p>
<p class="text-6xl">Póster de concierto</p>

Resumen práctico de los tamaños text-* más comunes.

6Pesos de fuente (font-*)

html 
<p class="font-thin">thin</p>
<p class="font-light">light</p>
<p class="font-normal">normal</p>
<p class="font-medium">medium</p>
<p class="font-semibold">semibold</p>
<p class="font-bold">bold</p>
<p class="font-extrabold">extra bold</p>
<p class="font-black">black</p>

Listado de clases font-* para controlar grosor tipográfico.

Espaciado y Tamaños

1Ancho 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.

2Má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.

3Imagen 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.

4Espaciado 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.

5Abreviaturas de padding y margin

  Referencia rápida

  • Padding: p- (todos), pt- (top), pb- (bottom), pl- (left), pr- (right).
  • Margin: m- (todos), mt-, mb-, ml-, mr-, mx- (left+right), my- (top+bottom).

html 
<div class="p-4">Caja con padding</div>
<div class="pt-2 pb-6">Padding arriba y abajo</div>
<div class="mx-auto mt-10">Centrado con margen</div>

6Escala común de spacing (px aprox.)

  Mapa mental

0→0px, 1→4px, 2→8px, 3→12px, 4→16px, 5→20px, 6→24px, 8→32px, 10→40px, 12→48px, 16→64px, 20→80px

7Bonus: Anchuras y alturas

html 
<div class="w-20 h-20 bg-blue-500"></div> <!-- 80x80 -->
<div class="w-full h-screen bg-gray-200"></div> <!-- ancho total + alto pantalla -->

Estilos Responsivos

1Visibilidad 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).

2Breakpoints (tamaños de pantalla)

  Tabla de breakpoints

  • sm (≥640px): celular horizontal
  • md (≥768px): tablet
  • lg (≥1024px): laptop
  • xl (≥1280px): pc grande
  • 2xl (≥1536px): monitor grande

html 
<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-4xl">
Cambia según la pantalla
</p>