TailwindCSS es un framework de CSS basado en clases de utilidad, donde en vez de escribir en una hoja de estilos o stylesheet CSS, SCSS o LESS, estaríamos escribiendo clases en elementos HTML. Parece loco, pero hay una explicación detrás de todo esto. En este artículo explicaremos sus conceptos básicos, beneficios y, al final, vas a encontrar un video mostrando cómo instalarlo e implementarlo con un ejemplo práctico.
Esta herramienta se basa en clases de utilidad, es decir, cada clase que escribimos en HTML esta mapeada o relacionada a una propiedad y valor en CSS.
Por ejemplo:
Se escribiría de esta manera:
La diferencia, como pueden ver, es que no estamos escribiendo CSS, estamos agregando clases al elemento h2. La clase que estaríamos usando sería text-white. Si inspeccionamos el heading en nuestra pagina veremos lo siguiente:
Ese es el CSS que se terminaría aplicando a la clase .text-white de Tailwind.
¿Por qué usamos este framework para trabajar?
Porque es sencillo y fácil de usar, ademas su documentación es muy buena, lo pueden ver ustedes mismos acá.
Tiene integraciones muy simples con:
- ReactJS: https://tailwindcss.com/docs/guides/create-react-app
- VueJS: https://tailwindcss.com/docs/guides/vue-3-vite
- NextJS: https://tailwindcss.com/docs/guides/nextjs
- NuxtJS: https://tailwindcss.com/docs/guides/nuxtjs
- Laravel: https://tailwindcss.com/docs/guides/laravel
- Gatsby: https://tailwindcss.com/docs/guides/gatsby
Beneficios
Escalabilidad y Mantenimiento
Como solo estamos alterando HTML usando este framework, es super fácil poder mantener proyectos grandes o chicos. No hay que preocuparnos por el scaffolding del proyecto para los estilos, ya que sólo deberíamos incluir TailwindCSS y nada más.
En caso de que se requiera extender parte de la funcionalidad de Tailwind, podemos modificar el archivo tailwind.config.js si es que está presente en nuestro proyecto, ya que hay varias maneras de instalar este framework.
A veces la nomenclatura de las clases es un tanto tediosa, pero es cuestión de acostumbrarse.
Performance
TailwindCSS usa una librería basada en JS llamada PurgeCSS, que se encarga de remover todas las clases de CSS que Tailwind define y que no estamos usando. Tiene configuraciones muy interesantes, lo pueden ver acá.
Nunca está demás aclarar que a medida que usamos más y más clases de TailwindCSS, el bundle de producción crecerá.
Versatilidad
Este framework te permite extender su colección de clases, por si en algún momento requieren algún valor en particular de alguna propiedad. Esta clase nueva que se estaría creando dentro de tailwind.config.js es interpretada por el compilador y queda disponible para usar en el proyecto.
Reutilización de componentes
Una vez creados los componentes con este framework es fácil poder reutilizarlos en otros proyectos, gracias a sus clases reutilizables.
Ejemplo práctico
Final Thoughts
✔ TailwindCSS es un excelente framework para las personas que quieren empezar un proyecto de manera rápida, sin preocuparse por el scaffolding del proyecto.
✔ Gracias a las tareas de optimización para producción, se puede incrementar la perfomance.
✔ La sintaxis de clases que se usa es bastante intuitiva y su curva de aprendizaje es muy rápida.
✔ Está basado en un design system, lo que hace que seamos consistentes en los espaciados y font sizes.
✔ Podemos disminuir el tiempo de maquetado, ¿cómo? Creando componentes reutilizables y sacándole el máximo provecho al framework. De esta manera nos podemos concentrar en la lógica de negocio e interacciones de la app / sitio web que estemos desarrollando.
Por Zarco Nontol,
Tech Leader en GM2.
