El siguiente diagrama resume el pipeline de compilación de Tailwind CSS 4 según el integrador elegido. El motor Oxide escrito en Rust detecta automáticamente las clases utilizadas en los archivos fuente y genera un único CSS final optimizado:
flowchart LR
subgraph Fuentes["Fuentes del proyecto"]
HTML["archivos .html<br/>.jsx .vue .astro"]
CSS["style.css<br/>@import tailwindcss<br/>@theme"]
end
subgraph Integradores["Integrador elegido"]
VITE["@tailwindcss/vite<br/>(Vite)"]
POST["@tailwindcss/postcss<br/>(Next.js, Nuxt)"]
CLI["@tailwindcss/cli<br/>(sin bundler)"]
CDN["browser@4<br/>(prototipado)"]
end
OXIDE["Motor Oxide (Rust)<br/>detección automática de clases<br/>cascade layers, container queries"]
OUT["output.css optimizado<br/>(solo clases usadas)"]
HTML --> VITE
HTML --> POST
HTML --> CLI
HTML --> CDN
CSS --> VITE
CSS --> POST
CSS --> CLI
VITE --> OXIDE
POST --> OXIDE
CLI --> OXIDE
CDN --> OXIDE
OXIDE --> OUT
Instalación con Vite
Vite es el entorno de desarrollo recomendado para trabajar con Tailwind CSS. El plugin oficial @tailwindcss/vite proporciona la integración más rápida y directa, con detección automática de contenido y recarga instantánea.
Crear el proyecto
El primer paso es crear un proyecto nuevo con Vite y acceder a la carpeta generada:
npm create vite@latest mi-proyecto-tailwind
cd mi-proyecto-tailwind
npm install
Vite solicita el framework deseado durante la creación. Se puede elegir Vanilla, React, Vue, Svelte o cualquier otra opción disponible.
Instalar Tailwind CSS
Se instala Tailwind CSS junto con su plugin para Vite:
npm install tailwindcss @tailwindcss/vite
Tailwind CSS no necesita postcss, autoprefixer ni el comando npx tailwindcss init. La configuración se simplifica al máximo.
Configurar el plugin de Vite
Se añade el plugin de Tailwind en el archivo vite.config.ts (o vite.config.js):
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
Importar Tailwind en CSS
En el archivo CSS principal del proyecto (por ejemplo src/style.css) se añade una única línea de importación:
@import "tailwindcss";
Esta importación reemplaza las antiguas directivas @tailwind base, @tailwind components y @tailwind utilities del enfoque clásico. Con una sola línea se incluyen todas las capas del framework.
Verificar la instalación
Se crea un archivo HTML de prueba para confirmar que las clases de utilidad funcionan correctamente:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
<div class="min-h-screen bg-linear-to-r from-blue-500 to-purple-600 flex items-center justify-center">
<div class="bg-white p-8 rounded-xl shadow-2xl max-w-md">
<h1 class="text-3xl font-bold text-gray-800 mb-4">Tailwind CSS</h1>
<p class="text-gray-600 mb-6">Instalación completada con Vite.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-colors">
Comenzar proyecto
</button>
</div>
</div>
</body>
</html>
Se inicia el servidor de desarrollo con npm run dev y Vite abre el proyecto en http://localhost:5173 con recarga en caliente activada.
Detección automática de contenido
Tailwind CSS detecta automáticamente los archivos fuente del proyecto sin necesidad de configurar rutas de contenido. El motor analiza los archivos .html, .js, .ts, .jsx, .tsx, .vue y otros formatos comunes del directorio del proyecto.
No es necesario mantener un array content en ningún archivo de configuración, como ocurría con el enfoque clásico basado en tailwind.config.js.
Instalación con PostCSS
Para proyectos que ya utilizan PostCSS como parte de su pipeline de construcción, Tailwind CSS ofrece un plugin dedicado que se integra en la configuración existente.
Instalar dependencias
npm install tailwindcss @tailwindcss/postcss
Configurar PostCSS
Se añade el plugin de Tailwind en el archivo postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
El archivo CSS principal se configura de la misma forma, con @import "tailwindcss". Esta opción es adecuada para proyectos con Next.js, Nuxt u otros frameworks que gestionan PostCSS internamente.
Instalación con CLI
La CLI de Tailwind permite compilar CSS sin depender de un bundler. Es útil para proyectos estáticos o entornos donde no se utiliza Vite ni PostCSS.
Instalar la CLI
npm install tailwindcss @tailwindcss/cli
Compilar CSS
Se ejecuta el comando de compilación indicando el archivo de entrada y el de salida:
npx @tailwindcss/cli -i src/style.css -o dist/output.css --watch
La opción --watch mantiene el proceso activo y recompila automáticamente cada vez que se detectan cambios en los archivos fuente.
El archivo src/style.css contiene la importación estándar:
@import "tailwindcss";
Y el HTML del proyecto enlaza el CSS compilado:
<link href="dist/output.css" rel="stylesheet">
Usar desde CDN
El CDN de Tailwind CSS es la forma más rápida de empezar a experimentar con el framework sin ninguna instalación previa. Es adecuado para prototipos, pruebas de concepto y aprendizaje inicial.
Implementación básica
Se añade el script del CDN en la sección <head> del documento HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS CDN</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="bg-blue-500 text-white p-8 rounded-lg">
<h1 class="text-2xl font-bold">Tailwind CSS desde CDN</h1>
<p class="mt-4">Este contenido utiliza clases de utilidad.</p>
</div>
</body>
</html>
Limitaciones del CDN
El CDN no es recomendable para producción por varias razones:
- Incluye todas las clases de utilidad, resultando en un archivo más grande
- No permite la eliminación de CSS no utilizado
- Requiere conexión a internet para cargar los estilos
- No soporta todas las funcionalidades avanzadas de Tailwind CSS
Para cualquier proyecto que vaya más allá de la experimentación, se recomienda la instalación con Vite, PostCSS o CLI.
Compilación para producción
Una vez completado el desarrollo, se genera la versión optimizada del proyecto:
npm run build
Tailwind CSS automáticamente elimina las clases no utilizadas, minifica el CSS resultante y optimiza los recursos para máximo rendimiento. El motor en Rust proporciona compilaciones extremadamente rápidas tanto en modo completo como en modo incremental.
Fuentes y referencias
Documentación oficial y recursos externos para profundizar en Tailwind CSS
Documentación oficial de Tailwind CSS
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Tailwind CSS es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de Tailwind CSS
Explora más contenido relacionado con Tailwind CSS y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
Comprender qué es y cómo usar el Play CDN de Tailwind CSS para prototipos y pruebas. Configurar Tailwind CSS con personalizaciones básicas mediante el Play CDN. Instalar Tailwind CSS en un proyecto profesional usando Vite. Configurar el entorno de desarrollo con Vite y PostCSS. Ejecutar y optimizar el entorno de desarrollo con Vite para producción.
Cursos que incluyen esta lección
Esta lección forma parte de los siguientes cursos estructurados con rutas de aprendizaje