# Tailwind CSS 4: Guía Completa 2026
Tailwind CSS 4 es el framework CSS utility-first más popular en 2026. Basado en clases de utilidad, te permite construir interfaces personalizadas rápidamente sin salir de tu HTML.
Pero no es magia. Tiene una curva de aprendizaje y reglas propias que necesitas entender antes de decidir si es para ti.
¿Qué es Tailwind CSS exactamente?
Tailwind no es un framework de componentes como Bootstrap. No tienes botones pre-construidos, modales, o tarjetas. Lo que tienes son:
– Clases de utilidad (p-4, bg-blue-500, flex, grid)
– Configuración personalizable
– Sistema de diseño consistente
– Plugins para extender funcionalidad
Ejemplo:
«html
Título
Contenido
Título
Contenido
`
¿Por qué Tailwind y no Bootstrap o CSS tradicional?
vs CSS tradicional
CSS tradicional:
`css`
/* styles.css */
.btn-primary {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}
Tailwind:
`html`
Ventajas Tailwind:
- No tienes que inventar nombres de clases
- Todo está en el HTML, no alternas entre archivos
- Responsive sin media queries complejas
- Consistencia de diseño garantizada
vs Bootstrap
Bootstrap (component-based):
`html`
Tailwind (utility-first):
`html`
Diferencia clave:
- Bootstrap tienes lo que te dan, si no te gusta, lo sobrescribes
- Tailwind tienes bloques de construcción, construyes lo que quieras
Novedades en Tailwind 4 (2023+)
Tailwind 4 introdujo cambios significativos:
1. Motor JIT (Just-In-Time)
Antes (v3): Generaba archivo CSS de 3MB+ que luego purgecabas
Ahora (v4): Genera solo las clases que usas en tiempo real
Resultado: Archivo CSS final de 10KB en vez de 3MB (sin plugins)
2. Nuevas variantes
Arbitraries:
`html
`
Modificadores de estado:
`html
`
3. Nuevas utilities
-
aspect-ratio - Relación de aspecto sin hacks
- scroll-snap - Scroll snapping nativo
- text-balance - Balanceo de texto mejorado
- scrollbar - Estilos de scrollbar
Configuración paso a paso
Opción A: CDN (Rápido para prototipos)
Tailwind Play CDN:
`html
`
Ventajas:
- Cero configuración
- Para prototipos rápidos
- No requiere Node.js
Desventajas:
- No puedes personalizar colores
- No es optimizado para producción
- Carga todas las clases (aunque JIT lo minimiza)
Opción B: CLI (Recomendado para producción)
Instalación:
`bash
npm install -D tailwindcss
npx tailwindcss init
`
Estructura generada:
`
project/
├── tailwind.config.js
├── postcss.config.js
├── src/
│ └── input.css # @tailwind directives
└── dist/
└── output.css # CSS generado
Configuración básica (tailwind.config.js):
`javascript
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./public/index.html",
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
}
}
},
plugins: [],
}
`
Opción C: Framework integrado
Vite + Vue/React:
Instalación:
`bash
npm install -D tailwindcss postcss autoprefixer
`
postcss.config.js:
`javascript
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
`
CSS principal:
`css
@tailwind base;
@tailwind components;
@tailwind utilities;
`
¿Y la semántica HTML?
Esta es la crítica más común a Tailwind: "mi HTML ya no es semántico".
Primero, seamos claros:
sigue siendo semántico. Las clases no afectan la semántica.
Si necesitas semántica, añádela:
`html
Título
`
Nadie te impide usar
,
,
