Tailwindcss, mi primera experiencia con el framework 🎨
Tags: css, html, webdev, spanish
Published: 2021-05-18 22:43:26

# **Índice**
1. [Introducción](#id1)
2. [¿Qué es Tailwindcss? Un vistazo general al framework](#id2)
3. [Ventajas](#id3)
4. [Desventajas](#id4)
5. [Referencias](#id5)
6. [Conclusiones](#id6)

## 1.**Introducción** <a name="id1"></a>
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** <a name="id2"></a>
**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** <a name="id3"></a>

### **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** <a name="id4"></a>
### **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** <a name="id5"> <a/>
El material para la redacción de este post fue tomado de la clase [Introduccón a Tailwindcss](https://codigofacilito.com/cursos/tailwind) de Código Fácilito.

--- 

## 6. **Conclusiones** <a name="id6"> <a/>
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: 

{% link https://dev.to/duxtech/flexy-boxes-generador-de-codigo-flexbox-55ic %}

{% link https://dev.to/duxtech/las-bondades-del-metodo-reduce-en-javascript-516o %}

{% link https://dev.to/duxtech/es6-destructuracion-de-objetos-en-javascript-3dca %}

---

![img](https://media.giphy.com/media/l2JeaFDEUkyXjoULK/giphy.gif)