Si eres como yo, ya estarás acostumbrado a crear cientos de sitios web con el popular framework CSS llamado Bootstrap. Pero recientemente me he pasado a Tailwind CSS para algunos proyectos. Si tú también has visto el bombo que se le ha dado y querías pasarte a Tailwind CSS, ¿pero no estás completamente preparado? Te ayudaré a decidir si debes seguir usando Bootstrap o cambiar a Tailwind CSS.
En esta guía, exploraremos las diferencias entre Tailwind CSS y Bootstrap, repasaremos algunos ejemplos para demostrar las ventajas de utilizar un marco de trabajo CSS que da prioridad a la utilidad frente a un kit de interfaz de usuario tradicional, y destacaremos algunos de los principales cambios más recientes en el marco de trabajo CSS de Tailwind, que está en constante evolución.
Un framework es un framework
En primer lugar, aquí no hay un camino correcto o incorrecto. Como ya estás usando Bootstrap, sabes la importancia y el tiempo que puede ahorrarte como desarrollador. Antes de Bootstrap, luchábamos por la compatibilidad con los navegadores y por hacerla responsiva en todos los dispositivos. Pero Bootstrap lo hizo fácil y nunca nos preocupamos de esto, ya que lo maneja por nosotros para que podamos centrarnos en nuestro diseño.
Qué es Tailwind CSS
Según la documentación oficial, Tailwind CSS es un marco de trabajo CSS de utilidad para construir rápidamente interfaces de usuario personalizadas. Me gusta pensar en él como una forma genial de escribir estilos en línea y conseguir una interfaz impresionante sin escribir una sola línea de tu propio CSS.
Yo diría que también es similar a Bootstrap en algunos aspectos. Bootstrap está construido con dos características principales: Los componentes preconstruidos y las clases de utilidad. En cambio, si utilizas Tailwind CSS, te faltarán los componentes preconstruidos, porque Tailwind CSS se limita a las Clases de Utilidad.
El objetivo subyacente es que, mientras construyes tu proyecto, no tengas que lidiar con los estilos en cascada ni preocuparte por cómo anular ese montón de 10 selectores que ha estado persiguiendo tu aplicación durante los últimos 2 años.
Entonces, ¿qué es lo que hace grande a Tailwind?
La solución de Tailwind es proporcionar una amplia variedad de clases CSS que tienen cada una su propio uso específico. En lugar de una clase llamada .btn que se crea con un montón de atributos CSS directamente, en Tailwind, aplicarías un montón de clases como bg-blue-500 py-2 px-4 rounded al elemento botón o construirías una clase .btn aplicando esas clases de utilidad a ese selector.
Sobre el bombo y platillo
Si observas con atención la comunidad de desarrolladores, seguro que te has encontrado con desarrolladores que alaban Tailwind CSS y lo utilizan para sus proyectos. A los desarrolladores con poco o ningún conocimiento de CSS les encanta Tailwind CSS porque con sólo recordar unas pocas clases de utilidad, pueden hacer muchas cosas increíbles sin siquiera tocar el archivo CSS (que es su peor pesadilla).
Esta es la razón principal por la que la gente adora Tailwind CSS, algo que no se puede hacer con Bootstrap. Porque Bootstrap proporciona pocos componentes, pero cuando quieras modificarlo o crear uno nuevo, tendrás que escribir CSS personalizado o SASS. En el caso de Tailwind, como hay una clase de utilidad para todo, es fácil en cierto modo.
Los haters
También te habrás dado cuenta de que mientras algunas personas literalmente adoran Tailwind CSS, muchas otras realmente odian este framework y tienen muchas razones para ello. Mi hallazgo es que son las personas que saben cómo escribir CSS real.
Sí. Si eres alguien que sabe escribir CSS de verdad, puede que te sientas raro al escribir lo mismo que los nombres de las clases. Pensarás que por qué no escribimos CSS normal en su lugar.
Introducción a la purga del CSS
Cuando usamos Bootstrap, la forma más fácil era incluir su CSS usando un CDN y hacer todas nuestras modificaciones en un archivo CSS personalizado. Esto dio lugar a un gran archivo CSS y la versión posterior de Bootstrap promovió SASS para incluir sólo los componentes que realmente utilizamos. Esto realmente ayudó a reducir el tamaño del archivo.
Del mismo modo, Tailwind CSS también proporciona una forma de eliminar el CSS no utilizado de nuestro proyecto. Dado que está impulsado por PostCSS, escanea todos nuestros archivos y elimina los nombres de las clases no utilizadas de la salida. Si lo comparas con Bootstrap será mucho más pequeño porque en Bootstrap controlamos el tamaño del archivo omitiendo componentes. Aunque sólo utilices una clase de un componente, debes incluir todo el componente. De este modo, aumenta el tamaño del archivo.
Nota: Puede haber herramientas similares para purgar el CSS como Tailwind CSS en Bootstrap también.
Nombres de clase largos
Otro de los principales problemas que plantea la gente con Tailwind CSS son sus largos nombres de clase, que dificultan la repetición de elementos. Aunque esto es cierto, proporcionan una buena opción para escribir un solo nombre de clase si lo deseas utilizando su directiva @apply.
Ejemplo
.btn-primary {
@apply bg-blue-500 text-lg py-5 px-3 text-white;
}De este modo, podrás utilizar sólo una clase pero seguir utilizando las utilidades de Tailwind CSS.
Las ventajas
Ahora puedes estar pensando, entonces cuál es la diferencia entre escribir @apply y CSS normal. El principal beneficio que veo con este método es la organización y mantenimiento del código. No importa cuántas personas hayan escrito el CSS, o en cuántas páginas hayas escrito el CSS, puedes asegurarte de que hay un estándar y no sólo números mágicos aleatorios como padding 17px;
Será más fácil crear y mantener un sistema de diseño utilizando el tailwind.config.js y podrás asegurarte de que no se escriben clases o propiedades extra no documentadas en el proyecto.
Llegando al punto clave
¿Bootstrap o Tailwind CSS? Esa es la cuestión principal y aquí tienes una forma sencilla de averiguarlo. Recuerda, no hay una forma correcta o incorrecta, se basará en tu proyecto y sus requisitos.
P) ¿Estás contento con Bootstrap?
R) Si es así, sigue usándolo, pero prueba Tailwind CSS es cualquier otro proyecto para familiarizarte.
P) ¿Sientes que es difícil mantener el CSS de Bootstrap en el tiempo?
R) Si es así, utiliza Tailwind.
P) ¿Tienes conocimientos profundos en la escritura de CSS puro?
R) No utilices ningún marco de trabajo, sólo haz uno que se adapte a tus necesidades. Aunque es mejor probar ambos para familiarizarse.
P) ¿Crees que escribir un montón de nombres de clases CSS es divertido?
R) Puedes seguir utilizando Tailwind CSS con la directiva @apply.
P) ¿Hay varias personas escribiendo CSS en tu proyecto?
R) Utiliza Tailwind CSS porque te reducirá los dolores de cabeza al mantener un proyecto grande.
P) ¿Crees que eres demasiado malo con el CSS y te cuesta hacer diseños o UI incluso con clases de utilidad?
R) Utiliza Bootstrap, ya que proporciona muchos componentes útiles que puedes copiar y pegar.
Eso es todo
Espero que ahora tengas una idea de los dos frameworks y de cómo funcionan, ahora es tu decisión elegir tu framework o no elegir ninguno. Recuerda que todo se basa en nuestras necesidades y nuestra experiencia. Repito que no hay una forma correcta o mala.
Hazme saber cuál es tu favorito y por qué.
Si me he olvidado de algo, dímelo también en los comentarios. Y si crees que te puede interesar, puedes visitar este artículo también muy interesante: 5 razones para adorar GraphQL
