Cómo optimizar tu CSS en páginas simples

Si tienes una página web simple hecha con HTML, JS y CSS, puedes optimizar significativamente el tamaño de tu CSS utilizando herramientas como PostCSS, cssnano, autoprefixer y tailwindcss. En esta guía te muestro cómo configurar estas herramientas.

Paso 1: Inicializa tu proyecto

Si aún no tienes un package.json, inicializa tu proyecto:

yarn init -y

Paso 2: Instala las dependencias

yarn add -D postcss postcss-cli cssnano autoprefixer tailwindcss

Paso 3: Crea tu archivo CSS de entrada

Crea un archivo input.css con las directivas de Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Paso 4: Configura Tailwind CSS

Crea el archivo tailwind.config.js:

module.exports = {
  content: ["./**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Paso 5: Configura PostCSS

Crea el archivo postcss.config.js:

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

Paso 6: Agrega scripts a package.json

Agrega los siguientes scripts a tu package.json:

{
  "scripts": {
    "build:css": "postcss input.css -o output.css",
    "watch:css": "postcss input.css -o output.css --watch"
  }
}

Paso 7: Genera tu CSS optimizado

Ejecuta el comando de build:

yarn build:css

El archivo output.css contendrá únicamente las clases de Tailwind que estés usando en tus archivos HTML, minificado y con los prefijos de navegador necesarios. Esto reduce drásticamente el tamaño de tu CSS final.

Para desarrollo, puedes usar el modo watch que regenera el CSS automáticamente cada vez que haces un cambio:

yarn watch:css