Acelera tu desarrollo con TailwindCSS.

Hablemos de TailwindCSS, seguramente si eres desarrollador web y estás empezando con frameworks CSS, hayas escuchado hablar de Tailwind, pero al momento de buscarlo puede que te hayas llevado una mala impresión. No te preocupes, en este artículo vamos a hablar de sus fundamentos y porque es que es tan popular en la industria.

En este artículo te quiero llevar en tus primeros pasos con este framework, para que puedas conocer qué cosas son las que me enamoraron de él.

¿Qué vamos a ver en este artículo?

• Instalación
• Configuración
• Fundamentos

Cabe mencionar, que vamos a ver cosas que puedes encontrar en la documentación, pero de una manera super resumida, así que te invito a echarle el ojo después de terminar de leer este artículo. 👀

Instalación

Vamos a hacer un proyecto sencillo, con puro HTML, CSS y JS.
A mí me gusta trabajar en Debian, así que todos los comandos que utilizaré seran de esta distribución y también utilizaré PNPM, para instalar los paquetes, pero sin problemas se puede hacer con el manejador de paquetes más te guste.

mkdir tailwind-example # Creamos una carpeta llamada tailwind-example para nuestro proyecto

cd tailwind-example # Ingresamos a la carpeta

pnpm install -D tailwindcss # Instalamos tailwind como dependencia de desarrollo

pnpm tailwindcss init # Inicializamos nuestro archivo de configuración de tailwind

Configuración

Una vez que ya tenemos instalado tailwind en nuestro proyecto, lo primero que tenemos que hacer es asegurarnos de que tengamos la configuración adecuada para leer nuestros archivos y podamos compilar correctamente el CSS que necesitemos.

El último comando que utilizamos nos crea el archivo de configuración de tailwind, en él lo primero que tenemos que hacer es decirle a qué archivos tiene que observar, buscando cambios en las clases para poder aplicarlo.

El archivo que vamos a tener al iniciar nuestro proyecto será el siguiente.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dentro de nuestra sección de content es donde definimos donde se encontraran nuestros archivos HTML (o js, jsx, tsx, según sea el proyecto que estemos creando.) para hacerlo hay dos patrones importantes que nos servirán.

* Para que busque cualquier cosa (archivos principalmente) excepto a los que se encuentren en sub-carpetas y archivos ocultos.
** Para que busque en el directorio actual, o subdirectorios.

Veamos algunos ejemplos.

content: [
    './pages/**/*.{html,js}',
    './components/*.{html,js}'
  ],

En el primer ejemplo de este código, le estamos diciendo, que busque cualquier archivo con terminación .html o .js, que se encuentre en cualquier subdirectorio o en el mismo directorio de pages.
El segundo ejemplo, es casi igual, con la diferencia, de que al no tener ** no buscara archivos en subdirectorios, únicamente buscara archivos .html o .js, dentro de esta carpeta.

Para este proyecto que haremos, utilizaré la siguiente estructura.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.{html,js}", 
    "index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Por ultimo, te dejo como advertencia no usar una instrucción tan amplia como la siguiente ./**/*.{html,js} ya que esto tambien buscaria dentro de nuestra carpeta node_modules, y traeria problemas de rendimiento.

Bien, ya casi podemos comenzar con nuestro codigo.
Unicamente nos hacen falta 3 pasos más, pero te prometo que despues de esto veras un verdadero cambio en la velocidad en la que haces paginas web.

Creando archivos CSS

Seguramente te estas preguntando porque estamos creando archivos CSS, si se supone que tailwind es una super libreria que nos ayuda con eso.
Bueno, esto es porque tailwind no trabaja como otros frameworks que tenemos en el mercado, tailwind no te mete todos los estilos de su libreria en tu proyecto, lo que hace es crearte un archivo CSS, unicamente con las clases que utilizaste, esto ayudando enormemente en el tamaño final de tu aplicación.

Bien, pues entonces te invito a crear una carpeta styles (o como gustes llamarle) en tu proyecto y crees dos archivos, uno que sera el base, en el cual escribiremos las siguientes 3 lineas de codigo.

@tailwind base;
@tailwind components;
@tailwind utilities;

Y el otro archivo lo dejaremos tal cual.

¿Lo tienes? perfecto, entonces ahora podemos ir a la terminal y escribir el siguiente comando en la raiz de nuestro proyecto.

pnpm tailwind -i styles/base.css -o styles/master.css --watch  

En este comando le estamos diciendo que ejecute el comando tailwind con la instruccion -i le decimos que le vamos a pasar un archivo de entrada, el cual tiene que ser el archivo al cual le agregamos las 3 lineas de codigo.
Con la instrucción -o le decimos que ese archivo sera su archivo de salida, en el cual vaciara todas los estilos que vayamos ocupando, ademas de un barrido a los estilos predeterminados de las etiquetas.
Y por ultimo, la instruccion --watch le decimos que se mantenga atento a cualquier cambio que haya dentro de estos archivos.

Creando nuestro archivo HTML.

Finalmente tenemos todo nuestro ambiente creado para poder trabajar con este famoso framework.
Vamos a crear nuestro archivo html, y lo unico que tenemos que hacer es importar el archivo de salida que le indicamos en el comando anterior, en mi caso, quedaria asi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/master.css">
    <title>Document</title>
</head>
<body>

</body>
</html>

Muchos pasos para utilizar un framework, ¿no?, ¿porque no usar Bootstrap, Materialize, UIKit, o cualquier otro framework que hay alla afuera?

Bueno, ahora si podemos hablar de los fundamentos.

Fundamentos

Emepecemos viendo como seria crear un componente con HTML y CSS tradicional y despues veamos como seria utilizando Tailwind

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

Ahora veamos el codigo que usariamos en tailwind.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

De primera instancia se ve bastante feo, vemos muchas clases en una misma etiqueta, expliquemos un poco las clases que tenemos en este elemento:

• p-6 - padding: 1.5rem; /* 24px */
• max-w-sm - max-width: 24rem; /* 384px */
• mx-auto - margin-left: auto; / margin-right: auto;
• bg-white - background-color: rgb(255 255 255);
• rounded-xl - border-radius: 0.75rem; /* 12px */
• shadow-lg - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
• flex - display: flex;
• items-center - align-items: center;
• space-x-4 - margin-left: 1rem; /* 16px */

Creo que ya te puedes dar una idea de que va tailwind, ¿no?
es antintuitivo hacer algo asi en CSS, tener tantas clases para cosas tan sencillas es raro, hemos aprendido que tenemos que crear clases que contengan las instrucciones especificas para cada elemento, pero hablemos de las ventajas de hacer esto.

1. No estás desperdiciando energía inventando nombres de clases.

Este punto se explica bastante bien solo, jaja.

2. Tu CSS deja de crecer.

Siempre que estamos creando paginas web, es normal que nuestro CSS siga creciendo y creciendo, por cada cosa nueva que añadimos, y al final tenemos un archivo CSS enorme, el cual es bastante dificil de mantener.

Prueba esta en el CSS que se utiilza para crear el componente que vimos anteriormente, te mostre el HTML, pero no el CSS, el cual es el siguiente:

  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

Y con Tailwind no tenemos ni una sola linea de CSS.

3. Hacer cambios se siente más seguro.

Cuando creamos CSS, muchas veces queremos optimizar y creamos clases que creemos que podemos utilizar en varias partes de nuestra pagina, pero esto aveces no nos sale de la mejor forma, y resulta que en una seccion esa clase no nos sirvio y tenemos que cambiarla o crear otra con una pequeña diferencia.
Y si tomamos la desición de cambiarla corremos el riesgo de descuadrar la pagina.

4. ¿Que hay de otros frameworks?

Otros frameworks tambien nos dan mucha libertad de personalizacion, pero siempre partimos de un diseño inicial el cual nos marcan los desarrolladores, y algunas cosas que no podamos cambiar con sus propias clases tenemos que hacerlas de manera manual, y terminamos creando mas CSS.

¿Ahora ves que ventajas tiene tailwind sobre la programacion tradicional o sobre otros frameworks?

¿Porque no utilizar estilos en linea?

Esa es una pregunta que se hacen muchos cuando ven tailwind por primera vez.
Si ya estoy creando una linea super larga con clases especificas para cada acción que quiero realizar, ¿porque no simplemente pongo mis estilos directamente en cada una?
Veamos la respuesta de esto en tres puntos.

1. Constancia en los estilos.

Tailwind tiene bien definidas sus clases, tiene una amplia gama de valores, pero al fin y al cabo tenemos una guia.
Crear nuestros estilos en linea hace que cada etiqueta sea un mundo por si mismo, y que para cada modificacion nos veamos en la necesidad de leer toda la linea para entender como funciona.

2. Responsive design.

Aqui viene la primer cosa que cuando escuche me volo la cabeza, con tailwind podemos usar mediaqueries directamente en nuestras clases, sin la necesidad de ir a especificarlo nosotros en nuestro CSS.

3. Hover, focus y otros estados

Al igual que con las media queries, podemos hacer uso de estados como hover, focus, active y pseudoclases como after, before, y muchas mas.

Espero que con esta pequeña introducción te haya convencido un poco de darle una oportunidad a tailwind, si es asi, te invito a que me dejes algun comentario, para ver si escribimos una segunda parte, con un poco de codigo de tailwind en accion.

Cualquier duda, sugerencia u opinión son bien recibidas en la sección de comentarios 😁

Pueden encontrarme en Twitter, Github, LinkedIn, Instagram.