TailwindCSS es uno de los frameworks de CSS más populares del momento. Se basa en el concepto de clases de utilidad primero y proprociona una serie de características que hacen que crear estilos sea muy productivo y sencillo, entre las que se encuentran:
- 1️⃣ Es rápido, cómodo y productivo para crear diseños o prototipos
- 2️⃣ Tiene un amplio abanico de clases mezcladas con tokens de diseño
- 3️⃣ Elimina el CSS no usado y se integra fácilmente con frameworks Javascript
Veamos como empezar a utilizarlo en un proyecto.
Instalación
Para utilizar TailwindCSS en un nuevo proyecto de Vite, simplemente tenemos que instalar los siguientes paquetes. El primero es el core de la librería y el segundo es la integración para usarlo en Vite.
Observa que tras la @ hemos escrito next. Esto es para que instale TailwindCSS 4, que en el momento de escribir este artículo está en beta y no es la versión por defecto:
$ npm install -D tailwindcss@next tailwindcss/vite@next
Ahora, en nuestro fichero de configuración vite.config.js, simplemente añadimos la integración con Tailwind, para poder utilizarlo en toda la aplicación:
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss()
],
});
Una vez hecho esto, en nuestro fichero principal index.css importamos la librería:
@import "tailwindcss";
Con esto estaríamos listos para hacerlo funcionar.
Uso de TailwindCSS
Ahora, para empezar a utilizar Tailwind solo tenemos que crear la estructura adecuada de HTML y colocar las clases de utilidad de Tailwind en el elemento HTML o contenedor apropiado. Extensiones como Tailwind Intellisense ayudan a autocompletarlas en VSCode, para no tener que estar consultando la documentación.
En este pequeño ejemplo hemos adaptado un poco la card de ejemplo de la página de inicio de Tailwind. Observa que hemos utilizado:
- Clases como
rounded-*nos ayudan a redondear las esquinas de los elementos. - Clases como
p-8om-8añadenpaddingomargina los elementos. - Clases como
text-teal-500nos permite añadir color de texto basado en la paleta de TailwindCSS. - Clases como
bg-[#080808]nos permiten añadir un color CSS de fondo personalizado cuando Tailwind se nos queda corto.
<html>
<head>
<title>Tailwind Example</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>
<body class="bg-[#080808] m-6">
<figure class="max-w-96 rounded-xl p-8 bg-teal-100 dark:bg-teal-950">
<img class="w-24 h-24 rounded-full mx-auto"
src="https://lenguajecss.com/assets/images/manzdev-hover.webp"
alt="ManzDev Tailwind" width="24" height="24">
<blockquote>
<p class="text-lg font-medium text-white m-8">
“Tailwind CSS is the only framework I've seen used by large teams
because apparently no one wants to actually learn real CSS. And
the excuses are always like, 'With Tailwind, I don’t have to
think about naming classes.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-teal-500 dark:text-teal-400">
ManzDev
</div>
<div class="text-teal-900 dark:text-teal-800">
CSS Engineer, EvilGoose
</div>
</figcaption>
</figure>
</body>
</html>
Obviamente, como habrás podido observar, es necesario tener los conocimientos básicos de CSS para poder utilizar Tailwind, por lo que aunque te resulte mucho más cómodo, Tailwind no es una herramienta para no tener que aprender CSS.
Si las clases de utilidad que te proporciona Tailwind son insuficientes y te gustaría crear tus propias clases de utilidad, pero hacerlo en CSS nativo no te interesa porque quieres las demás ventajas del framework, también podrías considerar utilizar UnoCSS, una alternativa a TailwindCSS donde funciona a modo de motor de clases de CSS atómico, altamente personalizable.
Ventajas y desventajas
Como toda tecnología, tiene sus ventajas y desventajas, sus amantes y detractores. En las siguientes pestañas tienes una lista de ventajas y desventajas de utilizar Tailwind:
Ventajas de TailwindCSS
Entre las ventajas de Tailwind se encuentran las siguientes:
1️⃣ Desarrollo rápido y productivo: Al desarrollar utilizando Tailwind enseguida se siente el avance de productividad, debido al uso de clases de utilidad, un enfoque que es ideal para prototipar debido a lo rápido que puedes iterar sin cambios de contexto entre HTML y CSS.
2️⃣ Base de clases creadas: El «problema» de las clases de utilidad es la generación de las clases, que suele ser tedioso. En el caso de Tailwind ya las tenemos creadas de serie, por lo que el desarrollador sólo tiene que escribir el nombre de las clases.
3️⃣ Tokens de diseño: Uno de los puntos interesantes de Tailwind es que tiene integrado un sistema de tokens de diseño, de modo que reduce la gran cantidad de opciones existentes (por ejemplo, colores) a una gama más pequeña, con nombres descriptivos y más fácil de usar. Esto no es algo exclusivo de Tailwind, pero viene incorporado, y hace que el desarrollador sea más consistente al elegir colores, tamaños, etc.
4️⃣ Integración y ecosistema: Tailwind se suele integrar bien con la mayoría de frameworks Javascript y tiene un ecosistema grande y activo, lo que hace que encaje muy bien en la mayoría de escenarios.
5️⃣ Elimina el CSS no utilizado: Por su diseño, aunque Tailwind tiene un código CSS muy extenso, se encarga de eliminar el código que no utilizamos en nuesta aplicación, haciendo que el CSS final tenga un peso más ligero y sea exclusivamente el que utilizamos en la aplicación web.
Desventajas de TailwindCSS
Entre sus desventajas, están las siguientes:
1️⃣ HTML más sucio e ilegible: En general, al utilizar sólo clases de utilidad, el HTML se vuelve mucho más sucio, genera «ruido» y se vuelve dificil de leer, sobre todo si tenemos la necesidad de utilizar CSS personalizado. Se suele reducir el tamaño del CSS, pero aumentar la complejidad del HTML.
2️⃣ Configuración compleja: La configuración de TailwindCSS puede ser compleja si no estás acostumbrado o si necesitas personalizaciones muy específicas que se vuelven complejas de mantener.
3️⃣ Estilos personalizados: En ciertos casos como estilos CSS que requieren una alta personalización puede ser necesario escribir clases de utilidad de CSS nativo que se vuelven muy ruidosas y complejas, como por ejemplo con gradientes, clip-path, máscaras u otras propiedades CSS complejas.
4️⃣ Esconde herramientas de CSS: Una de las desventajas de Tailwind es que evita o esconde ciertas características de CSS nativo: variables de CSS, selectores, pseudoclases, reglas, nesting... Es posible que Tailwind encaje bien con tu caso de uso y no necesites usarlas, pero evitar aprenderlas puede ser una desventaja.
5️⃣ No es adecuado para todos los proyectos: Aunque Tailwind suele ser muy cómodo en proyectos pequeños o páginas «de un solo uso», en proyectos grandes o con mantenibilidad a largo plazo puede ser contraproducente o difícil de mantener. Además, su utilización genera dependencia, o lo que es peor, querer utilizarlo en proyectos donde no encaja, simplemente porque te ha resultado fácil en otras ocasiones.
