Si estás leyendo estas líneas por voluntad propia, a buen seguro sabrás ya de qué va todo esto… Pero por si acaso, si has acabado aquí navegando de post en post, o de enlace en enlace, pongamos antes sobre la mesa un poco de contexto.
¿Qué es eso de CSS, Tailwind, Bootstrap…?
CSS (Cascading Style Sheets), traducido como «Hojas de estilo en cascada», es un lenguaje con el que se da forma y estilo a las páginas web, para que los usuarios las veamos tal y como fueron diseñadas antes de existir. Por simplificarlo, es lo que hace que ese botón tenga ese color fondo rosa y el color de su tipografía sea blanca; o que aquel recuadro tenga los bordes redondeados y que dependiendo del tamaño de la pantalla del dispositivo en que se visualice, aparezca de una forma u otra, o en una otra posición respecto a otro elemento.
CSS sería la herramienta base para lograr conseguir esta funcionalidad, pero para agilizar el trabajo y no tener que «reinventar la rueda» una y otra vez, comenzaron a surgir librerías, frameworks, UI-Kits… Y ahí es donde entran TailwindCSS, Bootstrap y otras tantas «colecciones» similares, que nos aportan un conjunto de herramientas para que el desarrollo sea más fluido.
Situémonos un poco…
La primera diferencia la podemos encontrar en el tiempo de vida. Bootstrap fue lanzado allá por mediados de 2011, cuando sus creadores (desarrolladores de Twitter) decidieron liberarlo como proyecto Open Source y compartirlo con la comunidad. A día de hoy, va por su v5 y su popularidad y uso es incuestionable, siendo muy de largo el framework más usado a día de hoy. Por lo que si tu objetivo más inmediato es encontrar un puesto laboral, tal vez podría interesarte más optar por aprender a manejarte con Bootstrap con soltura ya que es muy probable que sea requerido por las empresas a las que estés interesado en postularte.
TailwindCSS en cambio lleva con nosotros solo desde finales de 2017. Se trata también de un proyecto Open Source (código libre), y como podemos apreciar en la anterior gráfica, en este último par de años su crecimiento de uso se está disparando llegando a posicionarse en el segundo puesto con una amplia distancia frente al resto. Bootstrap ha comenzado a sufrir una pequeña recesión de uso, pero es normal que se mantenga a día de hoy aún la número uno después de tantos años liderando por amplia mayoría el olimpo de los frameworks UI. Eso ha supuesto que una ingente cantidad de webs a nivel mundial se desarrollaran con Bootstrap durante todos estos años, lo que se traduce en que a día de hoy sigan contando con él y toda modificación o mantenimiento se mantenga con esa herramienta; o que muchas empresas que en su día apostaron por este toolkit que aportó Twitter al mundo prefieran seguir empleándolo para sacar rendimiento económico en vez de reinventarse, adaptarse a nuevos tiempos, y adoptar nuevas tecnologías que puedan reportar nuevos y mejores beneficios a sus proyectos.
Pero una cosa es el uso (que al fin y al cabo depende de múltiples factores como acabamos de comprobar), y otra es el interés que generan y el grado de satisfacción… Veamos alguna gráfica estadística más al respecto, sacadas de la web stateofcss.com (web que recoge los resultados de una multitudinaria encuesta abierta realizada a desarrolladores y profesionales del sector).
En esta gráfica podemos observar como Bootstrap, pese a ser la número uno indiscutible en uso, tiene una valoración bastante negativa haciendo que se coloque en penúltima posición; mientras que por contra, Tailwind ha permanecido como la número uno en este aspecto todos estos años.
Pero, ¿en qué se diferencian?
Sin entrar demasiado en aspectos técnicos, la primera gran diferencia es su modo de uso. Mientras que en Bootstrap disponemos de componentes predefinidos y de la posibilidad de añadir un conjunto de reglas CSS con la inclusión de una única clase en torno a estos componentes; en TailwindCSS en cambio las clases predefinidas giran en torno a cualidades, basándose así en un principio de utility-first.
A priori, puede parecer que entonces Bootstrap es mucho más productivo, ya que añadiendo una única clase o un par (por ejemplo: «.btn .btn-primary») tendríamos nuestro botón perfectamente estilado, mientras que con Tailwind tendríamos que añadir 6 o 7 clases para obtener un resultado similar.
Pero si queremos ir más allá y personalizar y customizar nuestros elementos un paso más, entonces Tailwind nos ofrece la posibilidad de añadiendo solo una clase más obtener un estilo completamente distinto al pasar el ratón por encima de nuestro botón por ejemplo; mientras que en Bootstrap precisaríamos crear una clase nueva y editar el stylesheet para ello, mientras que Tailwind nos permite abstraernos de este paso.
Además de ser más customizable y flexible, la curva de aprendizaje es mucho menor respecto a Bootstrap, el tamaño del fichero css de Tailwind es más pequeño y su build time también es inferior, y además automáticamente elimina todo el css que no ha sido utilizado para mejorar aún más el rendimiento y el peso, lo que ayuda a una mejor puntuación a ojos de los buscadores como Google.
Conclusión
Como para gustos los colores, no vamos a posicionarnos por uno u otro, ya que las motivaciones y necesidades que pueden mover a cada persona pueden ser distintas. Sí que queremos volver a destacar el gran crecimiento de interés y suo que está viviendo TailwindCSS (que no descartemos que en unos pocos años desbanque a Bootstrap del primer puesto de uso), el alto grado de satisfacción de la comunidad con esta herramienta, y sus bondades que producen un mayor rendimiento (que puede favorecer a un mejor posicionamiento) y una mayor customización (haciendo que nuestra web tenga un diseño único y personalizable que la haga diferenciarse del resto y que al verla no nos traiga el recuerdo de otras que hemos visitado antes).
En Veiss comenzamos a probar las bondades de TailwindCSS ya por 2019, y desde primeros de 2020 lo venimos incluyendo de forma continuada en todos nuestros proyectos que así lo requieren.
Deja una respuesta