24 – Error: "Weird-but-valid", TailwindCSS v3
El post de hoy es bastante corto. En un proyecto de WeMake, decidí que era necesario actualizar a TailwindCSS v3. Según la guía de actualización de v2 a v3 se suponía que sería un proceso bastante simple. El cambio más importante en esta versión, del punto de vista arquitectónico, es que han migrado a una compilación justo a tiempo (JIT) por defecto, sin opción para deshabilitarlo.
Migración
Entonces, muy confiado, empecé, ejecuté el upgrade de las dependencias de NPM, eliminé las keys (llaves) del objeto de configuracion que ya no eran relevantes en mi tailwind.config.js, y, finalmente volví a compilar las hojas de estilo. Cuando entré a la landing del proyecto me di cuenta que estaba casi bien. Habían varias cosas con el estilo apropiado, es decir no estaba completamente mal, pero la gran mayoría no tenía los estilos apropiados. Revisé las hojas de estilo, y me di cuenta que todas las reglas estaban correctamente indicadas, indicando que el proceso de compilación JIT se había ejecutado correctamente. Entonces pensé: Donde está el problema entonces…?
Investigación
Habia algo claro, había un error en la hoja de estilos CSS y por eso dejaba de interpretar las reglas. Así que lo que hice fue investigar donde estaba el error. Primero, el error estaba al principio, ya que la mayoría de reglas no se estaban aplicando. Asi que tomé la mitad superior del archivo y la dividí en dos partes iguales, luego ejecuté solo la primera parte a ver si todas esas reglas se ejecutaban correctamente. Luego la segunda parte, y así hasta encontrar la regla ofensiva. Descubrí que el error estaba en la siguiente regla:
|
|
Por qué se generaba esta regla invalida? Porque al parecer mi configuración de TailwindCSS no era lo suficiente específica y estaba agarrando JS que no debía, y como JIT es obligatorio ese error pasó desapercibido en la v2.
Lo que debí hacer
Luego de resolver el problema, y al escribir este post recién se me ocurrío la idea de usar un validador de CSS, esto hubiera ayudado bastante para encontrar el problema, y hubiera evitado tener que buscar "a mano" el problema. A veces pasa.
Solución
La solución fue sencilla, especificar mejor mi tailwind.config.js para que solo abarque las carpetas donde hay HTML y JS escrito por mí (evitar node_modules y cualquier otra dependencia externa).
// tailwind.config.js
module.exports = {
- content: ['../**/*.html', './**/*.html', './**/*.js'],
+ content: ['./**/*.html'],
darkMode: "class",
theme: {
extend: {
colors: {},
fontFamily: {
// wefonts: ['Ubuntu']
}
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
}Conclusión
En fin, según la docu de migración de Tailwind:
[…] I think you are more likely to be attacked by a shark while working at your desk than you are to be affected by this change […]
Bueno, claramente para mi no fue tan simple, pero definitivamente también tuve parte de la culpa.