Tengo el archivo CSS Tailwind "completo" de 3,9 MB y apliqué con éxito PurgeCSS para reducirlo a 9 kB. Pero también purgó todas las clases receptivas como md:px-6 , no aparecen en mi versión purgada.
Nota: esta pregunta es para usar la interfaz de línea de comandos (CLI)
Esto es lo que hice:
purgecss --css ~/Desktop/Projects/Flask/Project1/build/static/css/main.css --content ~/Desktop/Projects/Flask//Project1/build/**/*.html --output ~/Desktop/Projects/Flask/Project2/static/css/main.css
Elegí crear el archivo de salida en una carpeta diferente ( Project2 ) para poder verificar la entrada frente a la salida.
Una cosa que intenté es agregar --safelist [/md/] , pero no funcionó. De hecho, la lista segura no parecía usarse en absoluto...
(Uso CLI ya que es parte de un proyecto Python Flask más grande)
PurgeCSS se basa en extractores para obtener la lista de selectores utilizados en un archivo. Proporciona un extractor predeterminado que funciona bien con una amplia variedad de tipos de archivos, pero puede ser limitado y no se ajusta a todos los marcos CSS que existen.
El extractor predeterminado considera cada palabra de un archivo como un selector, pero no considera caracteres especiales como los dos puntos ( : que se usan mucho en Tailwind CSS.
Entonces, de forma predeterminada, PurgeCSS elimina las clases receptivas ( md:px-6 ), hover ( hover:bg-gray-500 ), etc. Para evitar esto, Tailwind cuenta con su propio extractor . Puede usar este extractor (o el suyo propio), pero la CLI de defaultExtractor tiene opciones limitadas y le falta una opción de extractor predeterminada.
Afortunadamente, acepta una opción de archivo de configuración, por lo que si crea su propio archivo purgecss.config.js y agrega un extractor predeterminado allí, también conservará estas clases. También puede agregar sus otras opciones a este archivo.
Solía usar este extractor simple que también funcionará para usted:
(content) => content.match(/[\w-/:]+(?<!:)/g) || []Su archivo de configuración se verá así:
// purgecss.config.js module.exports = { content: ['build/**/*.html'], css: ['build/static/css/main.css'], defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [], output: 'static/css/main.css', };Y puede usar el siguiente comando para ejecutar PurgeCSS con la configuración anterior:
purgecss --config ./purgecss.config.jsEditar:
Como Fred mencionó en su comentario, si también desea incluir clases como px-2.5 , deberá agregar un archivo . al conjunto de caracteres:
(content) => content.match(/[\w-/:.]+(?<!:)/g) || []