Optimiza tu archivo: PurgeCSS y NanoCSS

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

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

• 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.

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

Comando para instalar purgecss

$ npm i -D @fullhuman/postcss-purgecss

*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',
    }),

    ]
  }

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

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

Formularios en tailwind
https://github.com/tailwindcss/custom-forms

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 “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

Bootstrap tables en tailwind
https://github.com/drehimself/tailwindcss-tables

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 🤯