CSS ser\u00eda la herramienta base para lograr conseguir esta funcionalidad, pero para agilizar el trabajo y no tener que \u00abreinventar la rueda\u00bb una y otra vez, comenzaron a surgir librer\u00edas, frameworks, UI-Kits… Y ah\u00ed es donde entran TailwindCSS<\/strong>, Bootstrap<\/strong> y otras tantas \u00abcolecciones\u00bb similares, que nos aportan un conjunto de herramientas para que el desarrollo sea m\u00e1s fluido.<\/p>\n\n\n\n La primera diferencia la podemos encontrar en el tiempo de vida. Bootstrap<\/a> fue lanzado all\u00e1 por mediados de 2011, cuando sus creadores (desarrolladores de Twitter) decidieron liberarlo como proyecto Open Source y compartirlo con la comunidad. A d\u00eda de hoy, va por su v5 y su popularidad y uso es incuestionable, siendo muy de largo el framework m\u00e1s usado a d\u00eda de hoy. Por lo que si tu objetivo m\u00e1s inmediato es encontrar un puesto laboral, tal vez podr\u00eda interesarte m\u00e1s optar por aprender a manejarte con Bootstrap con soltura ya que es muy probable que sea requerido por las empresas a las que est\u00e9s interesado en postularte.<\/p>\n\n\n\n TailwindCSS<\/a> en cambio lleva con nosotros solo desde finales de 2017. Se trata tambi\u00e9n de un proyecto Open Source (c\u00f3digo libre), y como podemos apreciar en la anterior gr\u00e1fica, en este \u00faltimo par de a\u00f1os su crecimiento de uso se est\u00e1 disparando llegando a posicionarse en el segundo puesto con una amplia distancia frente al resto. Bootstrap ha comenzado a sufrir una peque\u00f1a recesi\u00f3n de uso, pero es normal que se mantenga a d\u00eda de hoy a\u00fan la n\u00famero uno despu\u00e9s de tantos a\u00f1os liderando por amplia mayor\u00eda 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\u00f1os, lo que se traduce en que a d\u00eda de hoy sigan contando con \u00e9l y toda modificaci\u00f3n o mantenimiento se mantenga con esa herramienta; o que muchas empresas que en su d\u00eda apostaron por este toolkit que aport\u00f3 Twitter al mundo prefieran seguir emple\u00e1ndolo para sacar rendimiento econ\u00f3mico en vez de reinventarse, adaptarse a nuevos tiempos, y adoptar nuevas tecnolog\u00edas que puedan reportar nuevos y mejores beneficios a sus proyectos.<\/p>\n\n\n\n Pero una cosa es el uso (que al fin y al cabo depende de m\u00faltiples factores como acabamos de comprobar), y otra es el inter\u00e9s<\/strong> que generan y el grado de satisfacci\u00f3n<\/strong>… Veamos alguna gr\u00e1fica estad\u00edstica m\u00e1s 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).<\/p>\n\n\n\n En esta gr\u00e1fica podemos observar como Bootstrap, pese a ser la n\u00famero uno indiscutible en uso, tiene una valoraci\u00f3n bastante negativa haciendo que se coloque en pen\u00faltima posici\u00f3n; mientras que por contra, Tailwind ha permanecido como la n\u00famero uno en este aspecto todos estos a\u00f1os.<\/p>\n\n\n\n Sin entrar demasiado en aspectos t\u00e9cnicos, la primera gran diferencia es su modo de uso. Mientras que en Bootstrap disponemos de componentes predefinidos y de la posibilidad de a\u00f1adir un conjunto de reglas CSS con la inclusi\u00f3n de una \u00fanica clase en torno a estos componentes; en TailwindCSS en cambio las clases predefinidas giran en torno a cualidades, bas\u00e1ndose as\u00ed en un principio de utility-first.<\/p>\n\n\n\n A priori, puede parecer que entonces Bootstrap es mucho m\u00e1s productivo, ya que a\u00f1adiendo una \u00fanica clase o un par (por ejemplo: \u00ab.btn .btn-primary\u00bb) tendr\u00edamos nuestro bot\u00f3n perfectamente estilado, mientras que con Tailwind tendr\u00edamos que a\u00f1adir 6 o 7 clases para obtener un resultado similar.<\/p>\n\n\n\n Pero si queremos ir m\u00e1s all\u00e1 y personalizar<\/strong> y customizar<\/strong> nuestros elementos un paso m\u00e1s, entonces Tailwind nos ofrece la posibilidad de a\u00f1adiendo solo una clase m\u00e1s obtener un estilo completamente distinto al pasar el rat\u00f3n por encima de nuestro bot\u00f3n por ejemplo; mientras que en Bootstrap precisar\u00edamos crear una clase nueva y editar el stylesheet para ello, mientras que Tailwind nos permite abstraernos de este paso.<\/p>\n\n\n\n Adem\u00e1s de ser m\u00e1s customizable<\/strong> y flexible, la curva de aprendizaje<\/strong> es mucho menor respecto a Bootstrap, el tama\u00f1o del fichero css de Tailwind es m\u00e1s peque\u00f1o y su build time tambi\u00e9n es inferior, y adem\u00e1s autom\u00e1ticamente elimina todo el css que no ha sido utilizado para mejorar a\u00fan m\u00e1s el rendimiento<\/strong> y el peso, lo que ayuda a una mejor puntuaci\u00f3n a ojos de los buscadores como Google.<\/p>\n\n\n\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\u00ed que queremos volver a destacar el gran crecimiento de inter\u00e9s y suo que est\u00e1 viviendo TailwindCSS (que no descartemos que en unos pocos a\u00f1os desbanque a Bootstrap del primer puesto de uso), el alto grado de satisfacci\u00f3n 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\u00f3n (haciendo que nuestra web tenga un dise\u00f1o \u00fanico y personalizable que la haga diferenciarse del resto y que al verla no nos traiga el recuerdo de otras que hemos visitado antes).<\/p>\n\n\n\n En Veiss<\/a><\/strong> 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<\/a> que as\u00ed lo requieren.<\/p>\n","protected":false},"excerpt":{"rendered":" Si est\u00e1s leyendo estas l\u00edneas por voluntad propia, a buen seguro sabr\u00e1s ya de qu\u00e9 va todo esto… Pero por si acaso, si has acabado aqu\u00ed navegando de post en post, o de enlace en enlace, pongamos antes sobre la mesa un poco de contexto. \u00bfQu\u00e9 es eso de CSS, Tailwind, Bootstrap…? CSS (Cascading Style […]<\/p>\n","protected":false},"author":24,"featured_media":12684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[1234,47,1266,1231,113,1263],"_links":{"self":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12683"}],"collection":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/comments?post=12683"}],"version-history":[{"count":6,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12683\/revisions"}],"predecessor-version":[{"id":12699,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12683\/revisions\/12699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media\/12684"}],"wp:attachment":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media?parent=12683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/categories?post=12683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/tags?post=12683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Situ\u00e9monos un poco…<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2023\/02\/bootstrap-tailwind-use-graph-600x253.png\")
![\"\"](\"https:\/\/www.veiss.com\/blog\/wp-content\/uploads\/2023\/02\/bootstrap-tailwind-satisfaction-graph-600x252.png\")
Pero, \u00bfen qu\u00e9 se diferencian?<\/h2>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n