¿Viento de cola? Voy a pasar

Recientemente, utilicé Tailwindcss en un proyecto y ¿sabes qué? Fue una experiencia reveladora, por decir lo menos.

Algunos de ustedes se estarán preguntando: ¿qué es Tailwindcss?

Tailwind CSS se destaca como la biblioteca CSS de más rápido crecimiento hasta la fecha. Se ha convertido rápidamente en una herramienta esencial para los desarrolladores front-end. Muchos desarrolladores en el front-end lo están utilizando en proyectos a gran escala, encontrando problemas mínimos. Sus mejoras en el desarrollo y diseño de sitios web y aplicaciones web son innegablemente notables.

¿Entonces, cuál es el problema? ¿Por qué el título dice '“ Tailwindcss? No gracias ”?

Este título sugiere que podría haber casos en los que Tailwind CSS podría no ser la opción óptima para sus proyectos, a pesar de su excelencia. ¿Por qué podría ser esto? Hay una respuesta. Sin embargo, antes de profundizar en la explicación, establezcamos las bases para este examen de la tecnología.

¿Qué pasa con todos los CSS?

Antes de que podamos entrar en Tailwindcss y sus complejidades de desarrollo, debemos cumplir algunos requisitos previos.

¿Qué es CSS?

CSS significa hojas de estilo en cascada. En mi opinión, la mejor definición de CSS proviene de techterms.com

“CSS es un lenguaje de hojas de estilo que se utiliza para dar formato al contenido de las páginas web HTML. Las hojas de estilo CSS pueden definir la apariencia y el formato de texto, tablas y otros elementos por separado del contenido en sí. Los estilos se pueden encontrar dentro del archivo HTML de una página web o en un documento separado al que se hace referencia en varias páginas web”.

En pocas palabras: CSS es un lenguaje de estilo. Utiliza CSS en elementos HTML para que su página web o aplicación web se vea excelente.

¿Qué es Tailwindcss?

Según las palabras del propio equipo de Tailwindcss , Tailwindcss es " un marco CSS de primera utilidad repleto de clases como flex , pt-4 , text-center y rotate-90 que se pueden componer para crear cualquier diseño, directamente en su marcado ".

Básicamente, esto significa que el Tailwind CSS toma los procedimientos y operaciones originales de CSS y luego los hace más simples de hacer e implementar.

Ya hemos discutido los conceptos básicos de CSS y Tailwind CSS. Ahora, profundicemos más y examinemos cómo funciona Tailwind CSS en la práctica, junto con sus equivalentes CSS correspondientes. Esta exploración eventualmente nos llevará a la conclusión a la que llegué durante mi proyecto con Tailwind CSS.

Mi conclusión es que Tailwind CSS es más adecuado para proyectos front-end más grandes y complejos. Sin embargo, la opción predeterminada para la mayoría de las situaciones debería seguir siendo CSS "vainilla". En otras palabras, usar CSS en su forma más pura es generalmente más ventajoso para la mayoría de las personas y escenarios en comparación con cualquier biblioteca adicional, ya sea Tailwind CSS u otras.

Diferencias entre CSS y Tailwindcss

¿Qué aspecto tiene Tailwindcss? Comparemos haciendo un equivalente de Vanilla CSS y luego un equivalente de Tailwindcss.

Analicemos lo que está pasando en el texto anterior. Es un extracto de HTML 5 y estamos construyendo un botón.

Para construir el botón, lo configuramos a través de " divs ", esencialmente pequeños contenedores para ingresar cosas para cambiar nuestro sitio web o aplicación web. Damos a cada div su propia " clase " para que podamos hacer referencia a ese elemento en particular más adelante en nuestro archivo CSS separado. Aunque, también puede dar a los divs sus propios " ids ". Puede hacer cambios de CSS " en línea ", lo que significa que puede poner CSS directamente en el archivo HTML, pero la mayoría tiende a evitarlo por el bien de la organización.

En el archivo CSS, ¿cómo se vería nuestro código para editar el botón?

En el código anterior, estamos interactuando con la clase de botón en el extracto HTML. La forma en que hace que su archivo CSS reconozca sus clases HTML es con un punto al comienzo del nombre de la clase. Debajo de eso, en orden, alineamos el botón al centro del div con " elementos de alineación ". Debajo del elemento de alineación está el " clip de fondo " que define hasta dónde se extenderá y no se extenderá el " color de fondo ". El " borde " es el grosor de los lados del botón y el radio del borde es qué tan curvos son los bordes. Todo lo que acabamos de mencionar contribuye a desarrollar el estilo del botón. Como podemos ver, los estilos CSS originales parecen bastante simples. ¿Cómo manejaría Tailwindcss el mismo caso?

¿Esperar lo? ¿Acabamos de poner código con aspecto de CSS en un archivo HTML? si lo hicimos. Lo que está viendo es el equivalente de los ejemplos de código anteriores en Tailwindcss. Este es en realidad uno de los atributos más exclusivos de Tailwindcss. Cuando usa Tailwindcss, no coloca su código CSS separado en un archivo diferente. Todo su código Tailwindcss va directamente a su archivo HTML. Como dijimos antes, los desarrolladores tradicionalmente evitan la codificación CSS en línea . Con Tailwindcss, la codificación en línea ya no es realmente una opción, es casi necesaria. El Tailwindcss se implementa completamente a través de la identificación de clase .

Ahora, ¿qué hace el código anterior? hace exactamente lo que hace el código CSS original, aunque ligeramente diferente.

Echemos otro vistazo a CSS normal frente a la contraparte de Tailwindcss.

En la imagen de arriba, estamos en un documento HTML5 importando una imagen de chocolate bajo la clase " card-img ". Veamos cómo se ve el CSS correspondiente.

El código CSS anterior es similar al anterior. No hay necesidad de mucha extrapolación en profundidad. Estamos definiendo la apariencia de las tarjetas de chocolate. Veamos ahora la variante Tailwindcss mucho más interesante.

El código anterior es el equivalente de Tailwindcss. Es mucho más simple y más elegante, pero requiere mucho más esfuerzo para saber qué significa todo y cómo posicionar las declaraciones. Entonces, ¿es esa una ventaja que tiene sobre el CSS tradicional?

La naturaleza de Tailwindcss lo hace muy desordenado. Todo su código, tanto HTML como CSS, estará en un archivo y será largo y aparentemente abarrotado. Esto dificulta su desarrollo.

¿Cuáles son las principales desventajas de Tailwindcss?

• Curva de aprendizaje pronunciada a la que lleva tiempo acostumbrarse.
• Tiene que hacer componentes de clase personalizados. (Esto podría sumar mucho en un proyecto largo).
• Confuso porque se mezclan HTML y estilo

¿Cuáles son sus principales ventajas ?

• Altamente personalizable

• Desarrollo más rápido

• Redacción y patrones consistentes independientemente de lo que se agregue o edite.

  
  

Hemos visto ejemplos de Tailwindcss y ahora conocemos las principales ventajas y desventajas. Pero, ¿qué tan popular es?

Ha sido adoptado y proliferado entre los desarrolladores antiguos y nuevos.

Vivian Guillén de tailwindweekly.com declaró que Tailwindcss había obtenido 4,5 millones de descargas semanales hasta el 19 de noviembre de 2022. Mientras escribo esto, si ingresa a npmjs.com y busca Tailwindcss, tiene 336 millones de descargas. Desde su lanzamiento hace 5 años, eso es un promedio de 184,110 descargas por día. Una increíble cantidad de descargas.

Descansando en Tailwind

Anteriormente, al comienzo de este artículo, escribí: " Puede haber un momento o momentos en los que Tailwindcss no sea la solución óptima para sus proyectos". ¿Por qué escribí esto? y ¿cómo se correlaciona con el título? “¿Viento de cola? Voy a pasar ".

Tailwindcss es popular a nivel mundial entre casi todos los desarrolladores frontend, parece más fácil de implementar que el CSS tradicional y ofrece más personalización que otras tecnologías de este tipo. Diablos, mi uso de él incluso inspiró este artículo. Entonces, ¿por qué todavía lo dudo? Porque lo usé, por supuesto .

Tailwindcss es tan bueno como todos dicen que es y más. Del mismo modo, es tan malo como la gente dice que es así. La naturaleza de Tailwindcss hace que sea complicado trabajar con proyectos de corto a mediano plazo, la curva de aprendizaje obstaculiza completamente su desarrollo, la insistencia en hacer componentes personalizados, etc. Todo esto hace que Tailwindcss sea insoportable, A CORTO PLAZO . ¡Solo a corto plazo!

Esto significa que Tailwind CSS debe reservarse para proyectos extensos e intrincados realizados por desarrolladores y empresas. Para proyectos más cortos, es recomendable adherirse al CSS convencional. Esto evita que sus habilidades de CSS se debiliten y evita depender demasiado de los marcos de acceso directo como Tailwind CSS. ¿Por qué deberías creerme? Me desafié a mí mismo a emplear Tailwind CSS en un proyecto menor, y realmente subrayó por qué es más adecuado para empresas sustanciales y duraderas. ¡Estoy emocionado de profundizar en otros marcos CSS e incluso podría escribir artículos sobre ellos!

Puedes averiguarlo si te suscribes a mí y nos estaremos viendo muy pronto ;)