No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Optimiza tu archivo: PurgeCSS y NanoCSS

28/29
Recursos

Purge CSS & Nano CSS

Este es el contenido del archivo de configuración postcss.config.jscompleto.
Es Importante agregar la línea de:
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
Para el correcto funcionamiento de Pseudo-classes.

const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
 plugins: [
 require('tailwindcss'),
 require('autoprefixer'),
 purgecss({
 content: [
 './**/*.html',
 //Para agregar soporte para otro tipo de archivos.
 // './**/*.js',
 // './**/*.vue'
 ],
 //IMPORTANTE: Para soportar pseudo-clases
 defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
 }),
 require('cssnano')({
 preset: 'default',
 })
 ]
}

Aportes 28

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Importante No olvidar la línea defaultExtractor para que sigan funcionando los breakpoints del responsive design y las pseudoclases que utilizamos en el proyecto!
.
post.config.js

const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    purgecss({
      content: ["./**/*.html"],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

Comando para instalar nanoCss

$ npm i cssnano --save-dev

Muchas mas utilidades con tailwind
https://github.com/aniftyco/awesome-tailwindcss

  • PurgeCSS : Sirve en Tailwind para quitar el c√≥digo CSS que no estemos usando.
  • NanoCSS: Minifica el c√≥digo CSS para que pese lo menos posible.

Ambas librerías nos ahorran mucho almacenamiento.

Comando para instalar purgecss

$ npm i -D @fullhuman/postcss-purgecss

Al parece ahora PurgeCSS ya viene configurado por defecto en tailwind.config.js, en el item ‚Äėpurge‚Äô. Algo tal que as√≠, lo pueden ver en la documentaci√≥n:

Sin embargo, hay unas consideraciones, cuando se use con Vue por ejemplo, que al crear clases dinámicas, PurgeCSS no te las detecta. Pueden leer mas de eso por aquí: Removing unused CSS

Chicos y chicas, hoy siendo 20 de septiembre, Autoprefixer se actualizó a la versión 10, y está rompiendo purgecss y nanocss. Pude solucionar el problema haciendo downgrade a la versión 9.8.6 como lo indica este foro:

Para hacer downgrade a esta versión, pueden ejecutar desde consola:

npm i [email protected]9.8.6

tengo una duda al momento de purga el css no perdemos todas las utilidades de tailwild??

*Configuración del archivo postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      purgecss({
        content: ['./**/*.html']
      }),
      require('cssnano')({
        preset: 'default',
    }),

    ]
  }

No pude reducir el css sigue con mas de 10mil lineas de código!!
Qué puedo? hacer ayuda

Vue.js UI library using Tailwind CSS.
https://github.com/alfonsobries/vue-tailwind

React UI components using tailwindcss
https://github.com/knipferrc/tails-ui

Otro plugin para PostCSS
https://stylelint.io/ StyleLint is a modern CSS linter that proofreads and validates your CSS code.

Hola acabo de probarlo en un proyecto y me rompió todo mi estilo… tenia medidas personalizadas etc no fuciona con eso?

La librer√≠a CSSNANO que se usa en el curso es muy bueno tanto para ‚Äúocultar‚ÄĚ nuestro css como para minificarlo, pero cuando vayan a hacer un cambio mas adelante en el inspector les aparecer√° que esa clase que intentan cambiar esta en la linea 1.

Eso sucede porque lo minifico y lo dejo todo en una linea, para ello considero importante usar tambi√©n la librer√≠a sourcemaps el cual generara un ‚Äúmapa‚ÄĚ de su c√≥digo para que puedan evidenciar exactamente la linea que est√°n buscando.

Estoy revisando la documentación para ver como se instala y configura, cuando lo tenga volveré, si alguien lo encuentra estaría genial que lo compartiera.

Purgue
npm i -D @fullhuman/postcss-purgecss

nano
npm install cssnano postcss --save-dev

Si instaló Tailwindcss con la opción tailwind CLI, puede usar el siguiente comando para minificar el CSS:

npx tailwindcss -o public/css/style.css --minify
Muy buena la utilidad! Creo que fue la cl

Qué gran utilidad tener PurgeCSS !

Me funcionó perfecto!

Wow! Muy buenas paqueterias!

PurgeCSS y NanoCSS muy buenas librerías

No me funciona, pero creo que es porque en package.json mi script es: "build": "npx tailwindcss build CSS/tailwind.css -o public/css/style.css" entonces no estoy usando postcss no?

Cómo lo puedo solucionar? Para usar purgeCSS y NanoCSS

package.json

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss styles.css -o ../css/compiled.css",
    "watch": "postcss styles.css -o ../css/compiled.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.3",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.0.2"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^3.1.3",
    "cssnano": "^4.1.10",
    "postcss": "^8.2.4"
  }
}

Brutales estas 2 herramientas, pasamos de tener un css de miles de lineas a una pagina con texto css ūü§Į

Otro apunte seria que estas opciones de Purge y Nano, se usen en conjunto con una variable de entorno, ya que normalmente en desarrollo no vamos a querer que estas se ejecuten.