Si observamos el código CSS generado al usar Tailwind quizás nos quedemos con la boca abierta. De manera predeterminada ocupa nada más y nada menos que varios megas!!! 3 MB o más, dependiendo de la versión del framework y de las personalizaciones de Tailwind CSS que vengas realizando. Ese tamaño para un archivo CSS es inadmisible para un proyecto en producción, por muy grande que sea el sitio web y aunque estemos usando muchas de las clases de utilidad de Tailwind.

El motivo de ese enorme peso es la cantidad de clases de utilidad que nos proporciona Tailwind. Por mucho que nos empeñemos en sacarle partido al framework y usar cientos de clases es muy probable que no lleguemos a emplear ni un 1% de su código!! Por ello es esencial que podamos realizar las debidas optimizaciones del código CSS generado.

Como explicamos en el artículo anterior, una posible idea sería optimizar el tema gráfico, con lo que podríamos eliminar muchas clases que no necesitamos. Sin embargo, nos llevaría un gran trabajo manipular de manera tan minuciosa el archivo de configuración y seguramente sería complicado mantenerlo al día, cada vez que necesitemos incorporar nuevas clases. No sería práctico y todavía sería más complejo en proyectos donde participasen varias personas.

Otro detalle que se nos podría ocurrir sería minimizar el código y, aunque resulte un ahorro representativo, sigue sin ser suficiente. En este artículo veremos cómo conseguir optimizar de una manera más radical, para llegar al menor peso posible en nuestro CSS.

PurgeCSS

Comenzaremos usando una herramienta llamada PurgeCSS, que nos permite eliminar del código CSS todas las clases que no están siendo usadas desde nuestro HTML.

Esta herramienta se encuentra disponible como plugin en PostCSS y su documentación la puedes encontrar en purgecss.com/plugins/postcss.html

Cómo funciona PurgeCSS

Para que PurgeCSS haga bien su trabajo debemos comenzar por entender cómo funciona. Este plugin hace un análisis de todo el texto de los archivos que puedan tener HTML, buscando cadenas.

En la búsqueda de cadenas Purge CSS se encargará de localizar todas las clases de utilidad de Tailwind que estés utilizando, para poder luego optimizar el CSS generado. Ten en cuenta que no hace análisis de aquello que está escrito en los atributos class, sino cadenas en general en todos los archivos.

Cómo escribir el código HTML para que PurgeCSS localice todos los nombres de clases usadas

Por lo tanto, los nombres de las clases de CSS que va a dejar en el archivo de código generado, deben estar escritos, tal cual, en el texto del archivo compilado. Esto quiere decir que no deberíamos hacer algo como esto:

<div class="{{ $variable_clase_atributo }}">Elemento</div>

Puede que al procesarse el template unas veces se interpole $variable_clase_atributo colocando la clase "text-red-500" y otras veces "text-green-400". Sin embargo, PurgeCSS no tiene cómo saber los posibles nombres de esa variable $variable_clase_atributo. Por tanto, fallará y no mantendrá esas clases en el archivo CSS purgado.

Sería mejor un código como este:

<div class="@if $estado == 'error' text-red-500 @else text-green-400 @endif">Elemento</div>

De este modo, el nombre de la clase estará escrito en el template y PurgeCSS será capaz de detectarlo y hacer que dicha clase permanezca en el código resultante optimizado. Espero que eso se entienda, para que no haya sorpresas!

Cómo configurar los nombres de los archivos con el código HTML

Ahora veamos cómo indicarle a Tailwind qué nombres de archivos debe de procesar para buscar nombres de clases en su texto. Básicamente tendrás que indicarle todos los patrones de rutas donde haya código HTML. Estos archivos pueden ser:

• Ficheros HTML
• Ficheros PHP que tengan código HTML embebido
• Ficheros de vistas de un framework como Vue, React o Angular

La configuración de este listado de patrones de rutas se hace dentro del archivo tailwind.config.js, con un código como el siguiente:

module.exports = {
  purge: [
    './src/**/*.html',
    './otra_ruta/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Ejecutar el build en modo producción

Tailwind ya contiene la funcionalidad para activar automáticamente PurgeCSS por nosotros, a fin de ponerlo en marcha para limpiar de clases no utilizadas el código resultante. El único detalle es que PurgeCSS sólo se activa en modo producción.

De modo que, para conseguir que PurgeCSS entre en funcionamiento, vamos a tener que definir una variable de entorno de NodeJS en "NODE_ENV" con el valor "production".

Para facilitarnos la labor vamos a cambiar el script npm para build. Con estos tres scripts npm tenemos una buena cantidad de variantes de ejecución de PostCSS:

"scripts": {
  "build": "NODE_ENV=production postcss src/css/styles.css --output dist/css/styles.css",
  "dev": "postcss src/css/styles.css --output dist/css/styles.css",
  "watch": "postcss src/css/styles.css --output dist/css/styles.css --watch"
},

El primero produce el build, enviando la variable de entorno "NODE_ENV=production" para que se ejecute PurgeCSS. El segundo quizás es un poco innecesario, pero generaría el CSS sin hacer ninguna purga. El tercero es el watch, que ejecuta la generación de estilos cada vez que cambian los archivos fuente del CSS.

Ahora al hacer "npm run build" realizaremos la optimización del CSS, básica para que nuestro sitio web no tenga cargas innecesarias de clases que no se están utilizando.

Cambios en Tailwind 2.0 para usuarios de Tailwind 1.x

Como ya hace tiempo que se lanzó Tailwind CSS 2 es muy probable que no te interese el siguiente bloque, que afectará más a los usuarios de Tailwind 1.x que no hayan migrado todavía a la nueva versión.

En Tailwind 1 al usar purge, si ejecutas el build podrás encontrar un "warn" con un mensaje como este: The conservative purge mode will be removed in Tailwind 2.0.

Esto quiere decir que Tailwind en la versión 2.0 va a cambiar de funcionamiento en lo que respecta a la purga de código CSS. Actualmente solo se hace el purge de la capa "utilities", pero en la versión 2 pasará a purgar todas las "layers".

Nota: las "layers" o capas de Tailwind son las que colocas en las directivas @tailwind en el archivo CSS: "base", "components" y "utilities". Cada una contiene una cantidad de CSS. Hablaremos de ellas con detalle un poco más adelante en este manual.

Para quitar ese warning en Tailwind 1.x simplemente tienes que descomentar una línea en el atributo "future", de este modo:

future: {
  // removeDeprecatedGapUtilities: true,
  purgeLayersByDefault: true,
},

Esto quiere decir que ahora va a purgar todas las "layers" por defecto. Sería básicamente lo que haría en la versión 2 de Tailwind, purgar todas las layers existentes. Sin embargo, si quieres mantener la configuración anterior y purgar solamente una de las capas, utilities, sigues pudiendo hacerlo. Para ello simplemente necesitas activar el array "layers" dentro de Purge.

El código del purge te quedaría más o menos así:

purge: {
  layers: ['utilities'],
  content: [
    './src/**/*.html'
  ],
},

Conclusión

Con estas configuraciones habrás podido realizar una optimización muy relevante en tu código y podrás distribuir un CSS con el tamaño perfectamente ajustado. De esta manera, el archivo de código CSS resultante de usar Tailwind ocupará unas pocas KB. Para un sitio pequeño puede que en torno de 30 KB, para uno grande podría duplicarse ese tamaño, aunque todo depende de la cantidad de clases de utilidad que estés usando verdaderamente en el código de tu proyecto.

Esta posibilidad de optimización de Tailwind, ya incorporada de casa en el framework, es una de las ventajas fundamentales que encontramos en Tailwind con respecto a otros frameworks tradicionales basados en componentes como Bootstrap. Es decir, con Tailwind CSS no es necesario enviar a tus usuarios una cantidad de código CSS enorme, sino solamente el necesario.