Tailwind
framework de estilos
¿Qué es Tailwind CSS?
Tailwind CSS es un framework CSS “utility-first”, lo que significa que utiliza clases pequeñas y reutilizables para aplicar estilos directamente en el HTML sin escribir CSS personalizado.
🚀 Facilita la creación de diseños rápidos, responsivos y consistentes.
Características principales
-
💨 Utility-First → clases cortas que aplican estilos específicos (text-center, bg-red-500).
-
📱 Responsive → soporta breakpoints con prefijos (sm:, md:, lg:).
-
🎨 Customizable → se pueden extender colores, tipografías, espaciados y más.
-
⚡ Rápido → evita escribir CSS repetitivo y acelera el desarrollo.
-
🔄 Consistente → diseño uniforme en toda la web.
Ejemplo básico 📂
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Haz clic aquí
</button>
Ventajas de Tailwind
-
Desarrollo rápido sin CSS repetitivo
-
Fácil de mantener y escalar
-
Integración sencilla con frameworks modernos (React, Vue, Astro…)
-
Perfecto para prototipos y producción
Proyectos con Tailwind
IES Calvià Voley Tournament
En Producción
Plataforma desarrollada para organizar un torneo escolar de voleibol. Permite inscripciones, seguimiento de partidos en directo, actas digitales, estadísticas automáticas y paneles de administración para árbitros y organizadores.