Optimiza tu archivo: PurgeCSS y NanoCSS
Clase 28 de 29 • Curso de Tailwind CSS 1
Contenido del curso
- 6

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

Dimensiones y Espacios
08:57 - 9

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

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

Display
04:42 - 12

Flexbox
09:19 - 13

Crea tus propias utilerías
04:04 - 14

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

Creando una card
05:55 - 17

Aplicando formato a la card
09:06 - 18

Responsive design en la card
05:41 - 19

Construye el header
07:32 - 20

Crea el footer
09:46 - 21

Crea un banner
06:32 - 22

Cómo integrar una card
08:47 - 23

Forms
10:02 - 24

Directivas de Apply
02:57 - 25

Extraer componentes
08:11 - 26

Navbar
08:51 - 27

Alpine JS
03:32 - 28

Optimiza tu archivo: PurgeCSS y NanoCSS
03:56
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',
})
]
}