Librerías CSS y Tailwind

En el ecosistema React se suelen utilizar frecuentemente librerías o frameworks CSS para facilitar estilizar los elementos de nuestra aplicación web. Sin embargo, muchas veces se utilizan por desconocimiento o porque es la única opción que se conoce, y aunque muchas veces son ideales, en muchas otras ocasiones no son la mejor opción.

Si estás empezando con React, se recomienda echar un vistazo al post de Clases y estilos CSS primero, donde puedes ver formas más simples de aplicar estilos sin instalar librerías.

¿Qué opción CSS necesito?

Antes de lanzarse a utilizar una librería, primero debemos evaluar nuestras necesidades y que opción se adapta mejor a nosotros, ya que no suele exister una herramienta de estilado perfecta para todos los casos.

De todas estas opciones, siempre es bueno analizar cuales son las opciones más adecuadas para nuestro caso particular, ya que no siempre serán las mismas para todo el mundo.

Tailwind CSS

Una de las herramientas más populares en el ecosistema de React en los últimos años es TailwindCSS. Se trata de una librería que nos permite dar estilos a nuestros componentes mediante clases HTML predefinidas. Esto ofrece una cómoda alta productividad, que junto a lo bien que se integra con librerías como React, convierte a Tailwind en una herramienta perfecta para diseñar componentes.

Como aspectos negativos, Tailwind es bastante práctico cuando no requerimos complejos estilos o alta personalización, en cuyo caso la cantidad de clases crece excesivamente, volviéndose muy complejas, lo que dificultad su legibilidad y mantenimiento a largo plazo.

Instalación de Tailwind

Para instalar Tailwind en nuestro proyecto, simplemente ejecutaremos el siguiente comando, que instalará el núcleo de la librería y su adaptador para utilizar con Vite:

$ npm install -D tailwindcss @tailwindcss/vite

Luego, sólo tenemos que realizar dos modificaciones para utilizar Tailwind CSS: En primer lugar, modificar el fichero vite.config.js para indicarle que utilice Tailwind, por lo que nos quedaría algo similar a esto (a veces, respetando otras configuraciones existentes). En segundo lugar, en nuestro fichero index.css principal, añadirle una primera línea donde coloquemos la importación de Tailwind. Aquí tienes una muestra de estos dos ficheros:

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";

export default {
  plugins: [react(), tailwindcss()]
}

@import "tailwindcss";

¡Listo! Ya estamos preparados para utilizar Tailwind en nuestra aplicación de React.

Uso de Tailwind CSS

TailwindCSS se basa en añadir clases de utilidad para definir los estilos y el aspecto visual de los elementos o componentes, por lo que es fundamental conocer las clases que posee Tailwind, que son muy similares o tienen bastante relación con las propiedades CSS y sus valores. Por esta razón es muy importante que para utilizar Tailwind, primero aprendas CSS correctamente.

Aún así, una extensión que puede ayudar bastante es Tailwind Intellisense, que te añadirá autocompletado de clases de Tailwind al escribir un className. Por otro lado, la extensión Tailwind Fold también puede ayudarte a no saturarte con elementos con gran cantidad de clases, ya que te contrae y colapsa las clases con un solo click.

Veamos un ejemplo de un componente de React con un botón muy sencillo, estilado utilizando TailwindCSS:

export function Button() {

  const handleClick = () => {
    alert(`¡Has pulsado el botón!`);
  }

  return <button
    className="rounded-full px-6 py-2 bg-teal-950 hover:bg-sky-700 cursor-pointer"
    onClick={handleClick}>
    ¡Púlsame!
  </button>;
}

Hemos creado un botón al que le hemos dado:

• rounded-full Establece esquinas redondeadas.
• px-6 py-2 Establece un padding de proporción "6" en horizontal y "2" en vertical.
• bg-teal-950 Indicamos el color de fondo del botón.
• hover:bg-sky-700 Establecemos el color cuando se hace hover (se mueve el ratón por encima).
• cursor-pointer Cuando se mueva el ratón por encima, aparecerá el cursor apuntando.

Como puedes ver, es una excelente opción para iterar rápido y conseguir resultados, que se adapta muy bien a librerías como React, ya que puedes estilar componentes de forma sencilla y rápida. No obstante, recuerda que si necesitas alta personalización, un diseño muy definido o demasiado complejo con muchos estilos, quizás utilizar Tailwind no sea la mejor opción.

Algo que puede paliar en cierta forma esto, es la creación de clases propias mediante la regla @apply de Tailwind, que nos permite asociar varias clases a otra:

.button-style {
  @apply px-6 py-2 cursor-pointer rounded-full;
}

Como puedes ver, aquí hemos creado una clase button-style que es lo mismo que aplicar las clases px-6 py-2 cursor-pointer rounded-full. De esta forma aplicamos composición a nuestras clases CSS y conseguimos que todo sea más consistente si somos organizados.

No obstante, esta solución no suele agradar mucho en el ecosistema de Tailwind, ya que es «renunciar en cierta forma» a la libertad (o libertinaje) de Tailwind e introducir de nuevo los inconvenientes de los que huye Tailwind.