Hace dos semanas tuve que aprender Tailwind CSS, un nuevo framework CSS para participar en un apasionante proyecto del que todavía no puedo hablar.
Tailwind CSS tiene una filosofía muy distinta a otros frameworks CSS como Bootstrap. Aunque el resultado final pueda ser parecido, la forma de llegar a él es muy, muy distinta. Y eso le da ventajas y desventajas muy interesantes. Sin duda, a mí me ha gustado mucho trabajar con Tailwind y he disfrutado del proceso de maquetación.
Tailwind: Menos es más
Lo primero que podría contar es que mientras que otros frameworks añaden contenido con hojas de estilos, Tailwind ¡te los quita! Sí, Tailwind te deja el estilo de la web más plana que un disco. De normal, sin usar nada de CSS, etiquetas h1, h2, p, etc… tienen distintos tamaños y peso de fuente. Con Tailwind todo queda igual de plano. H1, h2, h3… todo tendrá el tamaño de 1rem y al igual con el resto de elementos html y sus propiedades.
¿Por qué? Porque la filosofía detrás de Tailwind es que solo uses lo que de verdad vas a usar. En CSS estamos muy acostumbrados a sobreescribir estilos CSS que nunca nos interesaron. Estilos que no solo pesan espacio sino que suelen molestar apareciendo cuando menos te los esperas y obligándonos a pasar mucho tiempo sobrescribiendo. Por eso, aunque Bootstrap tenga muchísimo poder de personalización, muchas páginas hechas con Bootstrap se parecen entre ellas, porque personalizarlo 100% requeriría mucho mucho tiempo. Encima muchas veces es un trabajo irritante porque no encuentras el atributo que está haciendo que ese elemento no te haga caso y te pasas las horas buscando la jerarquía en las herramientas de desarrollador.
Así que la primera característica de Tailwind es: Construye de la nada, no pierdas tiempo destruyendo.
El Framework CSS que no quiere CSS
La segunda característica de Tailwind es: Toca el CSS lo menos posible. Queremos que uses la enorme librería de clases que hemos hecho, elemento a elemento. Y dirás ¿qué? Pues sí, usando Tailwind tu html se ve tal que así:
<button href="#" type="button" class="mr-4 font-bold inline-flex justify-center rounded-full bg-lighter px-3 py-3 text-sm leading-5 font-medium text-gray-700 hover:bg-main hover:text-white focus:outline-none focus:border-main focus:shadow-outline-main active:bg-main active:text-white transition ease-in-out duration-150" id="options-menu" >Mi botón</button>¿Qué significa?
- mr-4: Margin right 1 rem
- font-bold: font-weight: bold
- inline-flex: display: inline-flex;
- px-3: padding-right: 0.75rem; padding-left: 0.75rem;
Y así todo… La primera vez que lo ves te parece una locura.
Mi experiencia con Tailwind
Realmente después de probarlo tengo muy buena experiencia y esto es lo que quería contar:
- Aprender todas las clases es muy fácil. No solo son bastante intuitivas sino que la documentación y la búsqueda de esta en la página oficial de tailwind CSS es muy muy buena.
- Una vez cogido el truco, el hecho de ir elemento a elemento, tardando poco en cada uno, sin saltar entre archivos y sin errores de sobrescritura de clases hace que el proceso sea rápido y ameno.
- El responsive es rápido, preciso y amigable gracias al uso rápido de flexbox y grid (que es como llama Tailwind al sistema de filas y columnas que usa como el de bootstrap).
- Para crear tus propias clases personalizadas puedes usar las clases de Tailwind dentro de un css propio que realmente usarás muy poco. Además usa PostCSS
- Todas las clases de Tailwind se pueden personalizar. Si para ti bg-red (que hace el background del elemento de color rojo) debería ser un color rojo concreto lo puedes modificar fácilmente con un archivo de configuración de Tailwind. Colores, tamaños, fuentes… lo que se te ocurra.
El truco final
Quizá te hayas preguntado… Pero una hoja de estilos que contiene cientos y cientos de clases para ser usadas ¡tiene que pesar muchísimo! Pues sí, incluso minificado, el css resultante de Tailwind pesa unos 400kB lo cual es muuucho CSS. Si lo pasamos por gzip pesará mucho menos pero hay una solución muy interesante que Tailwind nos ofrece una vez vayamos a lanzar a producción y es: purgecss.
Purgecss es una herramienta que elimina el CSS que no está siendo utilizado de nuestras hojas de estilos. Eso la hace genial para Tailwind, donde quizá un 80% de las clases no las has necesitado. Una vez que termines, todas las clases que no has utilizado en ningún momento desaparecerán, serán limpiadas del archivo css final y ¡tendrás únicamente lo que usas!
¿Desventajas?
Bueno… Entramos en un debate bastante interesante. Es buena práctica separar el estructurado de datos de los estilos. Por eso el HTML va en un archivo y las hojas de estilos por otro. Podríamos decir que Tailwind te obliga a hacer código espaguetti.
Para ciertos proyectos que requieran mucho JS puede que le tiempo que ganas por un lado lo pierdas desarrollando por tu cuenta JS que ya ofrece bootstrap como los menú para móvil, los modal, los slides, etc… De todas formas, eso también te da la oportunidad de personalizarlo mucho más. Si dependes poco de Bootstrap y eres buen@ pensando en CSS y JS puro, Tailwind te costará mucho menos y te gustará mucho más.