Optimiza tu archivo: PurgeCSS y NanoCSS
Clase 28 de 29 • Curso de Tailwind CSS 1
Contenido del curso
Conceptos básicos
Utilerías
- 6

Colores
04:25 min - 7
Cómo crear grids o columnas en Tailwind CSS
04:41 min - 8

Dimensiones y Espacios
08:57 min - 9

Cambiando las propiedades de la tipografía
04:59 min - 10

Ajustando el espaciado entre letras y líneas
04:37 min - 11

Display
04:42 min - 12

Flexbox
09:19 min - 13

Crea tus propias utilerías
04:04 min - 14

Entendiendo las variantes y las pseudo-clases
04:05 min - 15
¡Es hora de practicar!
01:40 min
Proyecto: PlatziFood
- 16

Creando una card
05:55 min - 17

Aplicando formato a la card
09:06 min - 18

Responsive design en la card
05:41 min - 19

Construye el header
07:32 min - 20

Crea el footer
09:46 min - 21

Crea un banner
06:32 min - 22

Cómo integrar una card
08:47 min - 23

Forms
10:02 min - 24

Directivas de Apply
02:57 min - 25

Extraer componentes
08:11 min - 26

Navbar
08:51 min - 27

Alpine JS
03:32 min - 28

Optimiza tu archivo: PurgeCSS y NanoCSS
Viendo ahora
Conclusiones
Resumen
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',
})
]
}