---
title: "Cómo optimizar tu CSS en páginas simples - Daniel Tello"
description: "Guía práctica para optimizar tu CSS en páginas simples con HTML, JS y CSS. Aprende a reducir el tamaño de tu CSS y mejorar el rendimiento."
url: https://tello.io/blog/como-optimizar-tu-css-en-paginas-simples/
author: Daniel Tello
lang: es
date_modified: 2026-05-31
---

# Cómo optimizar tu CSS en páginas simples

Guía básica para optimizar tu CSS en páginas simples (HTML, JS y CSS)

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:

```bash
yarn init -y
```

## Paso 2: Instala las dependencias

```bash
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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Paso 4: Configura Tailwind CSS

Crea el archivo tailwind.config.js:

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

## Paso 5: Configura PostCSS

Crea el archivo postcss.config.js:

```javascript
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:

```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:

```bash
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:

```bash
yarn watch:css
```