5. Tailwind CSS: Diseños Únicos
El fin del CSS a medida
Tailwind CSS es la forma de diseñar directamente en el HTML con miles de clases pequeñas pero potentes. No hay un btn-primary hecho; tú lo construyes así:
html+tailwind
HTML
1 <button class="bg-blue-600 p-4 rounded-lg text-white hover:bg-blue-700">
2 Botón creado con piezas
3 </button>
🔧 Clases de utilidad comunes
Aprende las piezas básicas para armar cualquier web:
- bg-red-500: Color de fondo rojo nivel 500.
- p-2, p-4, p-8: Espaciado interior (Padding).
- rounded-xl: Bordes muy redondeados.
- shadow-lg: Sombra exterior grande y suave.
- flex / grid: Activa el layout moderno al instante.
¿Por qué Tailwind y no Bootstrap?
Bootstrap te da bloques ya hechos (como LEGOs ya montados). Tailwind te da las piezas individuales, por lo que ninguna web hecha con Tailwind se parece a otra. Tú tienes el control absoluto del píxel.
Dato Pro: Tailwind también tiene soporte nativo para Modo Oscuro (añadiendo el prefijo dark:) y para dispositivos móviles (usando md: o lg: directamente en las clases).
🎨 Examen Final CSS3
¡Increíble! Has dominado el diseño web moderno. ¿Estás listo para darle vida a tus páginas con JavaScript en el futuro?
