¿Qué es Tailwind CSS y para qué sirve?
Tailwind CSS · Tecnología web
Tailwind CSS es una herramienta para darle colores, tamaños y estilo a una página con piezas de código ya hechas, escritas como clases cortas. Los colores y las letras se definen una vez, y todo el sitio se ve de la misma familia.
¿Qué es Tailwind CSS y qué ventajas tiene para el diseño de una página web?
Tailwind CSS es un framework de estilos de código abierto que funciona con clases utilitarias: en lugar de escribir hojas de estilo largas, cada elemento lleva clases cortas que indican, por ejemplo, su color o su margen.
Los colores y las tipografías se definen una vez en la configuración del proyecto, y al compilar solo quedan en el archivo final los estilos que se usan.
Un sistema de diseño definido en un solo lugar hace que todo el sitio se vea de la misma familia y que un cambio de marca no obligue a revisar página por página. Además el archivo de estilos queda pequeño, y eso ayuda a que la página cargue rápido en el celular.
Lo mismo, en pequeño y en grande
Una página que cambia de color de marca
Una marca decide cambiar su color principal. Como el color está definido en un solo lugar, el cambio se hace una vez y se aplica en todo el sitio, sin revisar página por página.
Un sitio con muchas páginas
Un sitio grande tiene decenas de páginas que deben verse coherentes. Con un sistema de diseño definido una vez, cada página nueva sale con los mismos colores, letras y botones. Además, el archivo de estilos queda pequeño y carga rápido en el celular.
Cómo lo usamos en Damorus
Este sitio usa Tailwind CSS 3.4, con los colores, las tipografías, los botones cuadrados y los detalles tipo consola de videojuego definidos como un sistema propio, para que cada página nueva se vea coherente con las demás. URG Technology usa Tailwind CSS v4, y el portafolio anterior de Damorus también se hizo con Tailwind.
Pon a prueba lo que leíste
Elige A, B o C. Si fallas, lees el porqué y pruebas otra vez.
Tu marca cambia de color y tienes cincuenta páginas. ¿Qué ventaja tiene definir los colores en un solo lugar?
Aprende jugando
Damo no adivina
Damo no adivina
Otros temas que te pueden interesar