Los frameworks de utilidad nos ayudan a diseñar nuestras páginas web más rápidamente, y Tailwind CSS se ha convertido en uno de los más populares. Pero ser popular no significa la perfección.
El uso de Tailwind CSS plantea algunos retos, como tener una hoja de estilos enorme durante el desarrollo y tener que habilitar variantes adicionales por nuestra cuenta, entre otros. La solución a algunos de estos retos será nuestro enfoque general en este tutorial.
En este tutorial, hablaremos de una característica muy importante del framework Tailwind CSS conocida como el compilador just in time, más comúnmente conocido como el compilador JIT.
Destacaremos las características y ventajas de utilizar el compilador JIT de Tailwind CSS, cómo activarlo y veremos algunos ejemplos prácticos.
Empecemos.
¿Qué es el compilador Tailwind CSS JIT (Just-in-Time)?
Antes de hablar del compilador «just in time», tenemos que hablar de Tailwind CSS.
Tailwind CSS es un marco de trabajo CSS con un conjunto de clases CSS predefinidas que se pueden aplicar directamente en nuestro marcado para acelerar el diseño de las páginas web y mantener la coherencia en el diseño mediante sistemas predefinidos.
Antes del lanzamiento del compilador JIT, el tamaño de nuestro archivo CSS generado por Tailwind tras la instalación suele ser de hasta 3 MB. Sin embargo, a medida que sigues configurando y personalizando Tailwind, el tamaño del archivo sigue aumentando: en algunos casos, puedes acabar con una hoja de estilos de hasta 15 MB.
Aunque todos los estilos que no se utilicen se purgarán durante la producción, no ocurre lo mismo durante el desarrollo. Con una hoja de estilos tan grande como 10 MB o incluso 20 MB, es probable que tengamos problemas y que nuestras herramientas de desarrollo se retrasen.
Con el compilador JIT, los estilos se generan a medida que construimos nuestros proyectos. Esto significa que sólo se incluirán en el tamaño de tu hoja de estilos las clases de utilidad que estés utilizando en ese momento, y no todas las clases de utilidad que vienen con Tailwind CSS.
Ventajas de utilizar el modo JIT de Tailwind CSS
En esta sección, hablaremos de algunas de las ventajas de utilizar el compilador JIT. Entre ellas están:
- Tu hoja de estilo es la misma en desarrollo y en producción.
- Tiempo de construcción más rápido.
- Todas las variantes están activadas por defecto.
- La compilación durante el desarrollo es mucho más rápida.
- Sólo se generan los estilos utilizados.
- Las variantes se pueden apilar.
- Mejora del rendimiento de las herramientas de desarrollo.
Inconvenientes del uso del compilador JIT de CSS de Tailwind
Las limitaciones actualmente conocidas según la documentación de GitHub del compilador JIT son
- Las opciones avanzadas de PurgeCSS no son compatibles.
- «Sólo puedes
@applyclases que formen parte del núcleo, generadas por plugins, o definidas dentro de una regla de@layer. No puedes@applyclases CSS arbitrarias que no estén definidas dentro de una regla@layer« - Sólo hay soporte para PostCSS 8.
La directiva @apply se utiliza para aplicar clases de utilidad en nuestro CSS personalizado. Esto es útil cuando estamos definiendo estilos CSS personalizados pero preferimos hacer uso de algunas clases de utilidad ya definidas.Aquí tienes un ejemplo de cómo funciona la directiva @apply:
.my-custom-css {
@apply text-green-500;
}En el código anterior, hemos añadido un color verde a una clase CSS personalizada. El color verde se aplicó utilizando una clase de utilidad de Tailwind.
Cómo activar el modo JIT de Tailwind CSS
Ten en cuenta que, en el momento de escribir este artículo, la versión 3 de Tailwind CSS ya ha sido lanzada y está habilitada por defecto cuando instalas Tailwind CSS. Las explicaciones que aparecen a continuación para habilitar el compilador JIT no se aplican a la versión 3 y superiores. Todos los demás ejemplos cubiertos en este tutorial son compatibles con la versión 3.
Es bastante fácil habilitar el compilador JIT. Todo lo que tienes que hacer es actualizar tu archivo tailwind.config.js añadiendo la propiedad mode, que debería tener el valor ‘jit’.
Este es el aspecto que debería tener tu tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./public/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}La línea en la que hay que centrarse es la parte en la que añadimos
mode: 'jit'
Esto nos permite utilizar las características del compilador JIT.
Una vez hecho esto, puedes ejecutar el comando de compilación y ver cómo disminuye el tamaño de tu archivo. Los únicos estilos que verás serán los que estés utilizando.
Con el tamaño de archivo reducido, tu hoja de estilos durante el desarrollo y la producción será la misma. La posibilidad de que las herramientas de desarrollo se retrasen también se reducirá al mínimo y tu código se compilará más rápido al construir tus proyectos.
A continuación, veremos algunas aplicaciones prácticas del compilador JIT.
Esto nos permite utilizar las funciones del compilador JIT.
Una vez hecho esto, puedes ejecutar el comando de compilación y ver cómo disminuye el tamaño de tu archivo. Los únicos estilos que verás serán los que estés utilizando.
Con el tamaño de archivo reducido, tu hoja de estilos durante el desarrollo y la producción será la misma. La posibilidad de que las herramientas de desarrollo se retrasen también se reducirá al mínimo y tu código se compilará más rápido al construir tus proyectos.
A continuación, veremos algunas aplicaciones prácticas del compilador JIT.
Cómo utilizar el compilador JIT de Tailwind CSS
En esta sección veremos algunos ejemplos prácticos del compilador JIT. Empezaremos con valores arbitrarios que nos ayudarán a ampliar el sistema de diseño de Tailwind.
Valores arbitrarios
Pueden surgir casos en los que prefiramos utilizar valores fuera del sistema de diseño ya creado. Estos valores pueden ser para nuestros colores, relleno, margen, anchura, etc.
El compilador JIT nos permite conseguirlo con el uso de valores arbitrarios. Estos valores arbitrarios nos permiten salirnos del sistema de diseño y definir nuestros propios valores personalizados.Verías estos valores en esta sintaxis [300px], [#FA8072].
Para ello, debemos anidar el valor entre corchetes para que Tailwind sepa que estamos definiendo nuevos valores en nuestro sistema de diseño. Aquí tienes un ejemplo:
<div class="mt-[300px] w-[500px]">
</div>En el ejemplo anterior, hemos utilizado dos nuevos valores -300px y 500px- que no existían inicialmente en el sistema de diseño. Antes del compilador JIT, probablemente tendrías que definir primero estos valores en el archivo config.js para conseguir este mismo efecto.
El siguiente ejemplo muestra cómo puedes definir nuevos valores de color como
<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>Aquí hemos creado un párrafo con un color de fondo salmón. No verías una clase de utilidad Tailwind que dijera bg-salmón, pero podemos definirlo utilizando un valor arbitrario.
Variantes apilables
Con el compilador JIT, todas las variantes están activadas por defecto, así que puedes olvidarte de utilizar el archivo config.js para activar alguna. Además, las variantes pueden apilarse para conseguir resultados increíbles.
Cada variante está separada por dos puntos.
Aquí tienes un ejemplo:
<button class="sm:dark:disabled:focus:hover:bg-blue-300">El código anterior crea un botón con la propiedad focus desbalanceada y que se vuelve azul al pasar el ratón por encima.
Pseudoelementos
El compilador JIT nos permite aplicar estilos a los pseudoelementos. Los pseudoelementos se utilizan para estilizar partes específicas de un elemento, como por ejemplo estilizar la primera letra de un elemento o insertar contenido antes/después de un elemento.
Aquí tienes algunos ejemplos:
<p class="first-letter:bg-green-600">
First letter will have a green color
</p>En el ejemplo anterior, la primera letra «M» tendrá un color verde.
<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>Cuando resaltes el texto del código anterior, tendrá un color de fondo verde.
Colores de los bordes
Debido a consideraciones de tamaño de archivo, esta característica se omitió inicialmente, pero eso cambió con el lanzamiento del compilador JIT. Podemos dar a cada borde un color diferente.
Veamos un ejemplo de ello:
<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>Hemos dado a nuestro div varios colores de borde: el borde superior es rojo, el derecho es azul, el inferior es amarillo y el izquierdo es verde.
Modo JIT en la versión 3 de Tailwind CSS
A partir de la versión 3 de Tailwind CSS, el compilador JIT está activado por defecto cuando instalamos Tailwind CSS, por lo que no tenemos que preocuparnos de alterar nada en el archivo tailwind.config.js. Esto nos permite acceder a todas las funciones del compilador JIT sobre la marcha. Todo lo que tenemos que hacer es seguir las instrucciones de instalación de la versión actual, y ya estamos en marcha.
Resumen
El compilador JIT llevó el framework CSS Tailwind a un nivel completamente nuevo. Su lanzamiento vino acompañado de nuevas y útiles características para mejorar nuestro uso del framework. Ya no tenemos que preocuparnos de que el tamaño de nuestros archivos sea tan pesado que haga que nuestras herramientas de desarrollo se retrasen, ya que sólo se generan los estilos que realmente utilizamos, todo sobre la marcha.
Vimos algunos ejemplos de las nuevas funciones, como el apilamiento de variantes, el estilo de los elementos mediante pseudoelementos, el uso de valores arbitrarios para ampliar nuestro sistema de diseño y una función muy demandada: la posibilidad de estilizar cada lado del borde de un elemento de forma individual. Aquí no hemos llegado ni mucho menos a las limitaciones de las capacidades de JIT de Tailwind, así que tus próximos pasos serán probar por ti mismo y explorar cómo puedes aprovechar mejor las características de JIT para tu propio trabajo.
¿Qué cosas geniales has construido utilizando el compilador JIT? Comparte tus ideas en los comentarios de abajo.
Ihechikara es desarrollador de software y escritor técnico. Le gusta escribir artículos sobre tecnologías web, programación y temas relacionados con la informática. Conecta con Ihechikara en X.
Deja una respuesta