DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

Tailwindcss, mi primera experiencia con el framework 馃帹

脥ndice

  1. Introducci贸n
  2. 驴Qu茅 es Tailwindcss? Un vistazo general al framework
  3. Ventajas
  4. Desventajas
  5. Referencias
  6. Conclusiones

1.Introducci贸n

Hace poco hice mi primer curso de Tailwindcss y honestamente qued茅 bastante complacido con este framework, en este breve post te dar茅 mi opini贸n, pros y contras que a primera vista pude encontrar con esta herramienta.

2. 驴Qu茅 es Tailwindcss? Un vistazo general al framework

Tailwindcss es un framework CSS (obvio XD) basado en utilidades, de bajo nivel y altamente personalizable creado por Adam Wathan.

Ahora quiza te preguntes, 驴otro framework css, en serio? Y si, quiza tengas motivos para disgustarte un poco pero te aseguro que te sientes as铆 por que aun no trabajaste con Tailwindcss.

A diferencia de otros marcos de trabajo similares como por ejemplo Bootstrap o Materialize, Tailwindcss no est谩 basado en componentes, esta gran diferencia puede ser una ventaja o desventaja dependiendo de la perspectiva que se use, abordaremos este tema un poco m谩s adelante.

Otra de las peculiaridades que debemos tener en cuenta antes de usar Tailwind es que el programador debe tener m铆nimamente conocimientos intermedios en CSS puro antes siquiera de animarse a instalar esta herramienta. Por ejemplo, si usaste Bootstrap sabes que tranquilamente es posible entrar a su documentaci贸n copiar y pegar c贸digo de un carrusel, un navbar o una card y usarlo en nuestro desarrollo, esto puede ahorrar bastante tiempo de codificaci贸n pero tambi茅n caemos en el problema de que todas nuestras paginas web se veran iguales en dise帽o, color, formas, animaciones, alertas, etc.

Para no hacer verboso el post, a continuaci贸n resumir茅 algunas de sus ventajas y desventajas:

3.Ventajas

Basado en Movil First

Tailwind recomienda realizar el dise帽o orientado a dispositivos m贸viles para luego expandirlo a visualizaciones en pantallas m谩s grandes, como tablets, laptops, computadoras de escritorio, etc.

Orientado a utilidades

Al no tener componentes para copiar y pegar los dise帽os de nuestras p谩ginas web son mucho m谩s personalizables, por ende podemos explotar al m谩ximo nuestra creatividad e imaginaci贸n para crear dise帽os 煤nicos.

Escribe menos c贸digo CSS

El objetivo de un framework css obviamente es escribir menos c贸digo y apoyarnos en las herramientas que nos ofrece el frameworks para que el desarrollo sea m谩s fluido, Bootstrap por ejemplo, para cambiar su paleta de colores era necesario picar c贸digo css propio, lo que a su vez significa mas c贸digo que mantener, mas c贸digo que escribir, 驴para que entonces usamos un framework? 驴mejor usar css puro no? Justamente esta es una de las principales ventajas de Tailwind, podemos realizar pr谩cticamente cualquier dise帽o usando sus clases utilitarias.

Paleta de colores extensa

Muchos framewoks tienen una paleta de colores limitada, pero Tailwind cuenta con una paleta de colores por defecto que viene con su instalaci贸n, y la versi贸n 2.0. del framework cuenta con una paleta de colores extendida que puedes configurar para usar y tu proyecto as铆 lo amerita.

Dark mode

La versi贸n 2.0. de Tailwind trae consigo la implementaci贸n del modo Dark, con poquisimas l铆neas de c贸digo puedes tener tu app en modo oscuro.

CSSGrid y Flexbox

Posee clases para aplicar tanto Flexbox como CSSGrid sin necesidad de escribir una sola l铆nea, tan solo aplicando las clases que te proporcionan, una belleza.

Personalizaci贸n del framework

Es bastante sencillo configurar el framework, solo necesitas indicar en un archivo .json cuales son las configuraciones que quieres que tenga tu proyecto.

Variables CSS

Puedes usar custom properties en tus proyectos tranquilamente.

Responsive Design

Proporciona clases de puntos de quiebre para hacer responsive nuestra web, esto sin usar media querys.

4.Desventajas

Instalaci贸n

Si bien podemos usar un CDN para usar Tailwind, se recomienda instalar el framework con npm para poder explotarlo al m谩ximo, esto puede tomar un poco mas de tiempo si lo comparamos con otros framewoks.

Debes tener conocimientos de CSS puro

Es imprescindible que tengas conocimientos intermedios de CSS puro para poder usar Tailwind sin frustrarse, recuerda: ya no tienes componentes para copiar y pegar.

No hay componenetes

Al no tener componentes para usar el tiempo de desarrollo es mayor, por ello no se recomienda usar Tailwind en proyectos que tienen una fecha de entrega ajustada.

Curva de aprendizaje un poco alta

Si te aventuras a usar Tailwind sin saber CSS de antemano se te complicar铆a mucho y estoy casi seguro que lo odiaras, recomiendo estudiar css antes de usar Tailwind.

Pseudo elementos

Tengo entendido que Tailwind no tiene clases definidas para trabajar con pseudo elementos como ::before o ::after, por ello deberemos escribir nuestro propio c贸digo css si necesitamos usar estas caracter铆sticas.

5. Referencias

El material para la redacci贸n de este post fue tomado de la clase Introducc贸n a Tailwindcss de C贸digo F谩cilito.


6. Conclusiones

Este post es meramente una opini贸n m铆a, no llevo mucho tiempo trabajando con Tailwind pero aun as铆 ten铆a ganas de compartir mi perspectiva sobre el framework con la comunidad d谩ndoles un pantallazo a groso modo sobre esta tecnolog铆a.


Te envito a visitar otros post de mi autoria:


img

Discussion (1)

Collapse
sturpin profile image
Sergio Turp铆n

Tailwind es un gran framework!
Cuando trabajo con 茅l tengo la sensaci贸n de que no rindo lo suficiente 馃槄 el motivo es porque lo estoy utilizando desde hace poco tiempo y no paro de mirar su documentaci贸n 馃榿

Salu2 馃槉