Í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:

---