🎨 1. Colores y fondo

text-{color} Cambia el color del texto.

1<p class="text-blue-500">Texto azul</p>

bg-{color} Cambia el color del fondo.

1<div class="bg-green-300 p-2">Fondo verde claro</div>

border-{color} Cambia el color del borde.

1<div class="border-2 border-red-400 p-2">Borde rojo</div>

placeholder-{color} Cambia el color del texto del placeholder.

1<input class="placeholder-gray-400" placeholder="Escribe aquí..." />

from-{color} to-{color} Crea un degradado con bg-gradient-to-*.

1<div class="bg-gradient-to-r from-purple-400 to-pink-600 p-4 text-white">
2  Gradiente bonito
3</div>

🧱 2. Espaciado (Padding y Margin)

p-{n} Aplica padding en todos los lados.

1<div class="p-4 bg-gray-200">Padding de 1rem</div>

px-{n} / py-{n} Padding horizontal o vertical.

1<div class="px-6 py-3 bg-gray-300">Padding X e Y</div>

m-{n} Añade margen externo.

1<div class="m-4 bg-blue-200">Margen de 1rem</div>

mx-auto Centra horizontalmente un bloque.

1<div class="mx-auto bg-yellow-200 w-1/2 text-center">Centrado</div>

space-x-{n} Espaciado horizontal entre hijos (en flex o grid).

1<div class="flex space-x-4">
2  <div>1</div>
3  <div>2</div>
4  <div>3</div>
5</div>

📏 3. Tamaño (Width y Height)

w-{n} Define el ancho.

1<div class="w-64 bg-blue-200">Ancho 16rem</div>

h-{n} Define el alto.

1<div class="h-32 bg-green-200">Alto 8rem</div>

w-full / h-full Ocupa todo el espacio disponible.

1<div class="w-full h-full bg-gray-100">Ocupa todo</div>

max-w-{n} / min-h-{n} Define límites de tamaño.

1<div class="max-w-md bg-red-100">Máximo ancho mediano</div>

aspect-{ratio} Mantiene una proporción (como 16:9).

1<div class="aspect-video bg-black"></div>

🧭 4. Posicionamiento

relative / absolute Define posición relativa o absoluta.

1<div class="relative h-20 bg-gray-100">
2  <div class="absolute top-0 right-0 bg-red-500 w-8 h-8"></div>
3</div>

fixed Fija el elemento al viewport.

1<div class="fixed bottom-0 right-0 bg-blue-500 text-white p-2">
2  Botón fijo
3</div>

sticky Se mantiene visible al hacer scroll.

1<div class="sticky top-0 bg-yellow-200 p-2">Encabezado fijo</div>

z-{n} Controla la superposición (z-index).

1<div class="relative z-50 bg-red-200 p-4">Z-index alto</div>

inset-0 Ocupa todo el contenedor.

1<div class="relative">
2  <div class="absolute inset-0 bg-black opacity-25"></div>
3</div>

🧩 5. Display y layout

flex Activa flexbox.

1<div class="flex gap-2">
2  <div>A</div>
3  <div>B</div>
4</div>

grid Activa grid.

1<div class="grid grid-cols-3 gap-4">
2  <div>1</div><div>2</div><div>3</div>
3</div>

block / inline-block Controla el tipo de visualización.

1<span class="inline-block bg-green-200 p-2">Inline Block</span>

hidden Oculta el elemento.

1<div class="hidden">Esto no se ve</div>

justify-center Centra horizontalmente (flex).

1<div class="flex justify-center">
2  <div class="bg-blue-300 p-2">Centrado</div>
3</div>

items-center Centra verticalmente.

1<div class="flex items-center h-20 bg-gray-200">
2  <p>Centrado vertical</p>
3</div>

gap-{n} Espaciado entre elementos.

1<div class="grid grid-cols-2 gap-6">
2  <div>A</div><div>B</div>
3</div>

🔠 6. Tipografía

font-{family} Cambia la fuente.

1<p class="font-mono">Texto monoespaciado</p>

text-{size} Tamaño del texto.

1<p class="text-4xl">Texto grande</p>

font-{weight} Grosor de texto.

1<p class="font-bold">Texto en negrita</p>

text-{align} Alineación del texto.

1<p class="text-center">Centrado</p>

uppercase / lowercase / capitalize Transforma el texto.

1<p class="uppercase">mayúsculas</p>

tracking-{n} Espaciado entre letras.

1<p class="tracking-widest">Texto separado</p>

leading-{n} Altura de línea.

1<p class="leading-loose">
2  Texto con más espacio entre líneas
3</p>

🧍 7. Bordes y esquinas

border Añade un borde.

1<div class="border p-2">Con borde</div>

border-{n} Grosor del borde.

1<div class="border-4 border-blue-400 p-2">
2  Borde grueso
3</div>

rounded-{n} Esquinas redondeadas.

1<div class="rounded-lg bg-gray-200 p-2">Esquinas suaves</div>

rounded-full Hace un círculo.

1<div class="rounded-full bg-red-500 w-16 h-16"></div>

border-t-{color} Borde superior.

1<div class="border-t-4 border-t-green-500 p-2">
2  Borde arriba
3</div>

🌫️ 8. Sombras, opacidad y mezcla

shadow Sombra ligera.

1<div class="shadow-md p-4 bg-white">Con sombra</div>

shadow-lg Sombra más pronunciada.

1<div class="shadow-lg bg-gray-100 p-4">Sombra grande</div>

opacity-{n} Controla la transparencia.

1<div class="bg-blue-500 opacity-50 p-4">Mitad visible</div>

mix-blend-{mode} Mezcla colores con el fondo.

1<div class="mix-blend-multiply bg-red-500 text-white">
2  Mezclado
3</div>

🌀 9. Transformaciones y animaciones

rotate-{deg} Rota el elemento.

1<div class="rotate-45 bg-yellow-300 w-16 h-16"></div>

scale-{n} Escala el tamaño.

1<div class="scale-110 bg-blue-200 w-16 h-16">+</div>

translate-x-{n} Mueve horizontalmente.

1<div class="translate-x-4 bg-green-200 p-2">Movido</div>

transition Suaviza los cambios.

1<button class="transition-all duration-300 hover:bg-blue-500 bg-blue-300 p-2">
2  Hover suave
3</button>

animate-bounce Rebota.

1<div class="animate-bounce bg-pink-400 w-10 h-10"></div>

animate-spin Gira.

1<div class="animate-spin border-4 border-t-blue-500 rounded-full w-8 h-8"></div>

📱 10. Responsividad

sm: Desde 640px.

1<p class="text-base sm:text-lg">Texto que crece</p>

md: Desde 768px.

1<div class="md:flex"><div>Col 1</div><div>Col 2</div></div>

lg: Desde 1024px.

1<div class="lg:w-1/2 bg-gray-100">Mitad en pantallas grandes</div>

xl: Desde 1280px.

1<p class="xl:text-2xl">Texto muy grande en pantallas grandes</p>

⚙️ 11. Extras útiles

cursor-pointer Cambia el cursor a “mano”.

1<button class="cursor-pointer bg-blue-300 p-2">Haz clic</button>

select-none Impide seleccionar texto.

1<p class="select-none">No seleccionable</p>

overflow-hidden Oculta el contenido que se desborda.

1<div class="overflow-hidden h-8">
2  <p>Texto muy largo que se corta...</p>
3</div>

truncate Muestra puntos suspensivos cuando el texto es largo.

1<p class="truncate w-32">Texto muy muy largo...</p>

object-cover Ajusta la imagen al contenedor.

1<img class="object-cover w-32 h-32" src="imagen.jpg" />

backdrop-blur Difumina el fondo (efecto cristal).

1<div class="backdrop-blur-md bg-white/30 p-4">
2  Fondo difuminado
3</div>

Curso de tailwind CSS