Tailwind CSS es un framework utility-first que te permite diseñar directamente en el HTML utilizando clases predefinidas. En lugar de escribir reglas CSS personalizadas para cada componente, aplicas clases que controlan márgenes, colores, tipografías, layouts y más. Esto agiliza el desarrollo y mantiene tu código consistente.
Contenidos
Instalación rápida
Usando CDN (para prototipos o pruebas rápidas)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Proyecto con Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Tu contenido aquí -->
</body>
</html>
Instalación con npm (para proyectos profesionales)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pEl 20% de Tailwind que necesitas para el 80% de los casos
Para aprovechar Tailwind al máximo sin aprenderlo todo de golpe, te recomiendo centrarte en estas clases, que cubren la mayoría de necesidades de diseño en cualquier proyecto.
📌 Espaciado (márgenes y padding)
m-4: margen en todos los lados.mt-4: margen superior.mb-4: margen inferior.p-4: padding en todos los lados.px-4: padding horizontal (izquierda y derecha).py-4: padding vertical (arriba y abajo).
🎨 Colores (fondos y texto)
bg-blue-500: fondo azul.bg-gray-100: fondo gris claro.text-white: texto en color blanco.text-gray-700: texto gris oscuro.
🔠 Tipografía
text-xl: texto tamaño extra grande.text-sm: texto pequeño.font-bold: fuente en negrita.italic: texto en cursiva.
📐 Layout y posicionamiento
flex: convierte el contenedor en un Flexbox.flex-row: coloca los elementos en fila.flex-col: coloca los elementos en columna.justify-between: distribuye los elementos con espacio entre ellos.items-center: centra los elementos verticalmente.
🔳 Bordes y sombras
rounded: bordes redondeados.rounded-lg: bordes más redondeados.shadow: agrega sombra suave.shadow-lg: agrega sombra más grande.
📱 Diseño responsive
Tailwind permite aplicar estilos según el tamaño de la pantalla con prefijos:
sm:→ Aplicado en pantallas pequeñas (≥640px).md:→ Aplicado en pantallas medianas (≥768px).lg:→ Aplicado en pantallas grandes (≥1024px).xl:→ Aplicado en pantallas muy grandes (≥1280px).
Ejemplo:
<div class="flex flex-col md:flex-row">
<div class="p-4 bg-gray-200">Columna 1</div>
<div class="p-4 bg-gray-300">Columna 2</div>
</div>
🎭 Estados interactivos
hover:bg-blue-700: cambia el fondo al pasar el cursor.focus:outline-none: elimina el contorno predeterminado al enfocar.active:bg-blue-900: cambia el fondo cuando se presiona.
Ejemplo de un botón interactivo:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Haz clic
</button>
Con solo estas clases, ya puedes construir interfaces limpias, responsivas y profesionales sin necesidad de escribir CSS adicional.
Ejemplos prácticos
1. Creando una tarjeta (card) simple
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="ruta-de-imagen.jpg" alt="Imagen descriptiva">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Título de la Tarjeta</div>
<p class="text-gray-700 text-base">
Esta es una descripción breve de lo que trata la tarjeta.
</p>
</div>
</div>
2. Barra de navegación responsive
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-white text-lg font-bold">MiSitio</a>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">Inicio</a>
<a href="#" class="text-gray-300 hover:text-white">Servicios</a>
<a href="#" class="text-gray-300 hover:text-white">Contacto</a>
</div>
<button class="md:hidden text-white">☰</button>
</div>
</nav>
3. Formulario de contacto estilizado
<form class="max-w-lg mx-auto bg-white p-6 shadow-lg rounded">
<label class="block text-gray-700">Nombre</label>
<input type="text" class="w-full p-2 border rounded mb-4">
<label class="block text-gray-700">Correo electrónico</label>
<input type="email" class="w-full p-2 border rounded mb-4">
<label class="block text-gray-700">Mensaje</label>
<textarea class="w-full p-2 border rounded mb-4"></textarea>
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Enviar
</button>
</form>
4. Tarjeta de usuario con avatar
<div class="flex items-center bg-gray-100 p-4 rounded shadow-lg max-w-sm">
<img class="w-16 h-16 rounded-full mr-4" src="avatar.jpg" alt="Avatar">
<div>
<h2 class="text-xl font-bold">Juan Pérez</h2>
<p class="text-gray-600">Desarrollador Web</p>
</div>
</div>
5. Grid de productos adaptable
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 shadow rounded">Producto 1</div>
<div class="bg-white p-4 shadow rounded">Producto 2</div>
<div class="bg-white p-4 shadow rounded">Producto 3</div>
<div class="bg-white p-4 shadow rounded">Producto 4</div>
</div>
6. Notificación emergente (toast)
<div class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg">
¡Acción completada con éxito!
</div>
7. Sección con imagen de fondo
<section class="h-64 bg-cover bg-center text-white flex items-center justify-center" style="background-image: url('fondo.jpg');">
<h1 class="text-3xl font-bold">Bienvenido a nuestro sitio</h1>
</section>
8. Tabla estilizada con Tailwind
<table class="table-auto w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-200">
<th class="border border-gray-300 px-4 py-2">Nombre</th>
<th class="border border-gray-300 px-4 py-2">Edad</th>
<th class="border border-gray-300 px-4 py-2">País</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2">Juan</td>
<td class="border border-gray-300 px-4 py-2">30</td>
<td class="border border-gray-300 px-4 py-2">España</td>
</tr>
<tr class="bg-gray-100">
<td class="border border-gray-300 px-4 py-2">Ana</td>
<td class="border border-gray-300 px-4 py-2">25</td>
<td class="border border-gray-300 px-4 py-2">México</td>
</tr>
</tbody>
</table>
Con estos ejemplos, tienes una sólida base para implementar Tailwind CSS en tus proyectos y mejorar la velocidad de desarrollo. ¡Manos a la obra! 🚀