No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
15H
41M
47S
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

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 30

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Al parece ahora PurgeCSS ya viene configurado por defecto en tailwind.config.js, en el item 鈥榩urge鈥. 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

  • 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

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.

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 autoprefixer@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?

Les comparto el archivo: postcss.config.js con comentarios para que entiendan que estamos realizando por cada linea de codigo:

// se est谩 importando el plugin de PurgeCSS, que se utiliza 
// para eliminar el CSS no utilizado de los archivos de estilo.
// Se almacena en la variable purgecss.

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

module.exports = {
  plugins: [
    // tailwindcss: Este plugin se utiliza para aplicar estilos utilizando Tailwind CSS
    require("tailwindcss"),
    // autoprefixer: Este plugin se utiliza para agregar autom谩ticamente los prefijos de 
    // los navegadores a las propiedades CSS.
    require("autoprefixer"),
    /*
      purgecss: Este plugin se utiliza para eliminar el CSS no utilizado 
      de los archivos de estilo. En la configuraci贸n se est谩 especificando 
      que se escanear谩 todos los archivos HTML del proyecto y se utilizar谩 
      un extractor personalizado para encontrar los selectores CSS utilizados 
      en el proyecto.
    */
    purgecss({
      content: ["./**/*.html"],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    /*
      cssnano: Este plugin se utiliza para comprimir el c贸digo CSS,
      reducir su tama帽o y optimizar el rendimiento. En la configuraci贸n
      se est谩 utilizando la opci贸n preset con el valor "default" para
      aplicar una serie de optimizaciones predefinidas.
    */
    require("cssnano")({
      preset: "default",
    }),
  ],
};

En mi caso tuve que modificar el archivo package.json, para poder trabajar con normalidad:

Adem谩s esto:

La librer铆a CSSNANO que se usa en el curso es muy bueno tanto para 鈥渙cultar鈥 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 鈥渕apa鈥 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 馃く