Just-In-Time: La Próxima Generación de Tailwind CSS

Actualización: A partir de Tailwind CSS v2.1, el nuevo motor Just-in-Time está incluido directamente en Tailwind CSS, por lo que ya no necesitas el paquete @tailwindcss/jit. Aprende más en la documentación.

Una de las restricciones más difíciles con las que hemos tenido que lidiar mientras mejorábamos Tailwind CSS a lo largo de los años es el tamaño del archivo generado en desarrollo. Con suficientes personalizaciones en tu archivo de configuración, el CSS generado puede alcanzar los 10mb o más, y hay un límite de CSS que las herramientas de compilación e incluso el propio navegador pueden tolerar cómodamente.

Por esa razón, siempre has tenido que tener cuidado con los cambios costosos en tu archivo de configuración, como agregar demasiados breakpoints adicionales o habilitar variantes extra como disabled o focus-visible.

Hoy estoy súper emocionado de compartir un nuevo proyecto en el que hemos estado trabajando que hace que estas consideraciones sean cosa del pasado: un compilador just-in-time para Tailwind CSS.

@tailwindcss/jit es una nueva biblioteca experimental que compila todo tu CSS bajo demanda mientras creas tus archivos de plantilla, en lugar de generar toda tu hoja de estilos por adelantado.

Esto viene con muchas ventajas:

• Tiempos de compilación ultrarrápidos. Tailwind puede tardar entre 3 y 8 segundos en compilar inicialmente usando nuestro CLI, y más de 30 a 45 segundos en proyectos webpack porque webpack tiene dificultades con archivos CSS grandes. Esta biblioteca puede compilar incluso los proyectos más grandes en aproximadamente 800 ms (con reconstrucciones incrementales tan rápidas como 3 ms), sin importar la herramienta de compilación que estés utilizando.
• Cada variante está habilitada de fábrica. Variantes como focus-visible, active, disabled y otras normalmente no están habilitadas por defecto debido a consideraciones de tamaño de archivo. Dado que esta biblioteca genera estilos bajo demanda, puedes usar cualquier variante que desees, cuando lo desees. Incluso puedes apilarlas como sm:hover:active:disabled:opacity-75. Nunca más tendrás que configurar tus variantes.
• Genera estilos arbitrarios sin escribir CSS personalizado. ¿Alguna vez necesitaste algún valor ultraespecífico que no formaba parte de tu sistema de diseño, como top: -113px para una imagen de fondo peculiar? Dado que los estilos se generan bajo demanda, puedes simplemente generar una utilidad para esto según sea necesario usando la notación de corchetes como top-[-113px]. Funciona también con variantes, como md:top-[-113px].
• Tu CSS es idéntico en desarrollo y producción. Como los estilos se generan a medida que se necesitan, no necesitas purgar los estilos no utilizados para producción, lo que significa que ves exactamente el mismo CSS en todos los entornos. Nunca más te preocupes por purgar accidentalmente un estilo importante en producción.
• Mejor rendimiento del navegador en desarrollo. Dado que las compilaciones de desarrollo son tan pequeñas como las de producción, el navegador no tiene que analizar y administrar múltiples megabytes de CSS pregenerado. En proyectos con configuraciones muy extendidas, esto hace que las herramientas de desarrollo sean mucho más responsivas.

Pruébalo hoy instalando @tailwindcss/jit e incorporándolo en tu configuración de PostCSS:

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  },
};

Lo estamos lanzando como una biblioteca separada por ahora, pero una vez que hayamos resuelto todos los problemas, lo integraremos directamente en tailwindcss detrás de una opción de configuración, y nuestro objetivo es convertirlo en el predeterminado en Tailwind CSS v3.0 más adelante este año.

Aprende más sobre el proyecto en GitHub, luego instálalo, juega con él, dóblalo, rómpelo y ¡cuéntanos qué piensas!

¿Listo para probarlo? Comienza →