Blog ✌️
--- visitas¡Tailwind CSS está creciendo! Extensiones VSCode y más
Publicado el
En este blog post aprenderás qué es Tailwind, por qué es importante, cómo utilizar las extensiones de VS Code y mucho más.
¿Qué es Tailwind CSS?
Tailwind es un framework de CSS que se basa en brindar clases utilitarias con las que podemos construir cualquier interfaz, que sean únicas y al mismo tiempo aprender CSS mientras estamos escribiendo las clases.
Con esto también nos brinda la posibilidad de crear nuestros propios componentes reutilizables, imaginemos un botón el cual será nuestra base con un padding específico y un tipo de letra y tamaño específico pero que cambiará de color cuando lo utilicemos por ejemplo en botones de guardado (verde o azul), cancelar (gris normalmente) o borrar (en rojo); entonces llamamos a nuestro componente y con una clase, por ejemplo bg-red-500 le cambiamos el color y sigue teniendo la misma estética inicial.
Esto nos ayuda por sobretodo a ser más ágiles mientras estamos desarrollando un proyecto, dado que vamos un poco más enfocados en utilizar las clases y ajustar el diseño que en realizar nuestros propios estilos, tratar de que todo sea responsive, más de 10 @media en nuestro CSS para hacer que nuestra sección nunca se vea mal. Usar este tipo de herramientas nos ayudará a que nuestro desarrollo sea más ágil, y en este post te explicaré cómo.
El primer paso es la documentación
El sitio web de Tailwind es increiblemente hermoso e intuitivo, que si, ya se que el sitio está en inglés, pero recordemos que el inglés en nuestra profesión es un you should know (debes saberlo). Todas las instrucciones, comandos, la manera en la que se escribe el código y documentaciones está escrita en inglés al ser este un lenguaje global con el que todos se entienden. Para empezar solo debes dar el primer paso, te recomiendo muchísimo ir usando Duolingo para ayudarte con lo básico, de ahí en más series, películas y música en inglés para que te vayas acostumbrando; ahora si, sigamos con el post.
Cuando entramos a la documentación nos encontramos con esta sección que con una animación nos demuestra cómo funcionan las clases de Tailwind y cómo podemos construir un testimonial que parece simple pero tiene un cierto yo no se que y llama la atención:
Para comenzar le damos click al botón Get started y entraremos a una página inicial que nos presentará la documentación inicial sobre Tailwind.
La mejor manera (y esto lo digo a opinión personal) es en su canal de YouTube, todos los videos están en inglés pero gracias al algoritmo de YouTube podemos activar subtitulos si lo necesitamos para entender lo que se hablar en el video, y extrañamente por experiencia propia puedo decir que las traducciones están un 90% bien. En estos videos Adam Watham el creador de Tailwind CSS nos lleva por un camino en el que hacemos el frontend de las aplicaciones, agregamos varias animaciones y de paso nos enseña a extender las configuraciones de este framework 🎉
Si navegamos en la barra de la izquiera hacia abajo podemos encontrar absolutamente todas las utilidades que nos ofrece este framework:
Si entramos a cualquier apartado podemos encontrarnos una interfaz donde veremos:
- Una tabla con una la lista de todas las clases que pertenecen a esa sección, con el nombre de la clase y su valor
- Ejemplos de uso bien graficados para que puedan ser mejor entendidos
- Y finalmente un apartado para personalizar aún más esas clases
Podemos aprender CSS gracias a las clases de Tailwind 🤯
Tailwind es muy semántico con la manera en la que se escriben sus clases:
- Si queremos alinear el texto de un botón, utilizamos
text-left,text-centery más - Si queremos añadir más columnas a nuestro grid utilizamos
grid-col-12o para filasgrid-row-8, y viendo la documentación vemos que por detrás utilizagrid-template-columnsygrid-template-rows - Si queremos añadir el color rojo utilizamos tonalidades desde el número 100 al 900, por ejemplo
bg-red-600
Por detrás Tailwind utiliza muchísimo las variables de CSS de una manera que no imaginábamos, muchas clases como bg-opacity-75 lo que tiene dentro es una variable de CSS --tw-bg-opacity: 0.75; entonces esto aplicaría una opacidad a nuestro fondo, pero ¿cómo interactúa Tailwind con esa variable? sencillo, te lo muestro con un ejemplo:
Por ejemplo, la clase bg-white tendría este output:
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
Como puedes notar por default ya viene con la variable --tw-bg-opacity dentro de ella, entonces cuando agregamos bg-opacity-75 en nuestra consola del navegador podremos ver esto:
Sobreescribe la variable original y bg-white interactúa con la nueva variable para generar una opacidad. Así funciona mayormente todo el framework, nada de clases sobre clases para sobreescribir cosas, utiliza el potencial que ya poseemos de CSS y lo lleva a un nuevo nivel tan alto que no parece CSS, pero lo es.
VSCode + Tailwind CSS
Lo que más me gusta de Tailwind es la integración que tiene con VSCode gracias a tres extensiones que te harán la vida muchísimo más fácil:
Esta extensión nos permite organizar las clases de nuestro HTML ordenando por funcionalidad, breakpoints e inclusive pseudoselectores
Esta extensión lee tu archivo de configuración de Tailwind y mientras escribes clases te da una lista de sugerencias e inclusive puedes ver el valor de cada clase
Por último pero no menos importante (porque la utilizo muchísimo) tenemos a Tailwind Shades, esta grandiosa extensión nos genera las tonalidades dado un color para que podamos personalizar aún más la mezcla de colores de nuestra página
¿Cómo puedo instalar Tailwind en mi framework favorito?
A lo largo de varios meses han salido a la luz varios boilerplates donde enseñan cómo integrar Tailwind con tu herramienta favorita, y aquí te dejo algunos:
Conclusiones
A veces probar una nueva herramienta puede ser difícil, pero a opinión personal te recomiendo que des ese primer paso, empieza haciendo pequeños proyectos, añadiéndoles complejidad y haciendo tus propios componentes. Mi propio website con animaciones y transiciones está hecho completamente en Tailwind. En mi lugar de trabajo también utilizamos Tailwind para todos nuestros proyectos, y déjame decirte que la agilidad al desarrollar interfaces subió un 40% y el tiempo por proyecto se disminuyó 🎉 así que come on! Dale un intento
- Los veo en el código 👨💻