)
Alcance de esta guía
Vue CLI está en modo de mantenimiento. Esta guía sirve para mantener una aplicación existente con Vue 3 y Vue CLI; para un proyecto nuevo, empieza con Vue + Vite. Aquí generaremos Tailwind CSS 4 mediante su CLI y dejaremos que Vue CLI importe el CSS resultante.
Instala las herramientas
npm install -D tailwindcss @tailwindcss/cli npm-run-all
En src/assets/tailwind.css:
@import "tailwindcss";
Scripts de desarrollo y producción
Añade estas entradas a los scripts existentes de package.json. Conserva los demás scripts del proyecto.
{
"scripts": {
"tailwind:watch": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/tailwind-output.css --watch",
"tailwind:build": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/tailwind-output.css --minify",
"serve:vue": "vue-cli-service serve",
"serve": "npm-run-all tailwind:build --parallel tailwind:watch serve:vue",
"build:vue": "vue-cli-service build",
"build": "npm-run-all tailwind:build build:vue"
}
}
El primer tailwind:build crea el archivo antes de arrancar Vue. En desarrollo, el watcher de Tailwind y el servidor de Vue se ejecutan en paralelo. En producción, las dos tareas se ejecutan en secuencia: primero CSS y después el paquete de Vue. No combines además este flujo con un plugin PostCSS de Tailwind que procese el mismo archivo por segunda vez.
Importa una vez el resultado en src/main.ts o src/main.js:
import './assets/tailwind-output.css'
Comprueba el resultado
<template>
<main class="min-h-screen bg-slate-950 p-8 text-white">
<h1 class="text-3xl font-bold text-emerald-400">Tailwind 4 en una app existente</h1>
</main>
</template>
Ejecuta npm run serve y comprueba el fondo oscuro y el título verde. Cambia una clase completa en el componente y verifica que se actualiza. Después ejecuta npm run build y comprueba el CSS y la aplicación generada en dist con un servidor HTTP.
Errores frecuentes y límites del entorno legado
Si el import de CSS falla, ejecuta npm run tailwind:build y confirma la ruta de salida. Si una clase no aparece, usa nombres completos en el código. El archivo tailwind-output.css es generado; edita el de entrada y tus componentes.
No desactives optimization.minimize para conseguir que el build termine. Webpack activa la minimización de producción por defecto. Si una dependencia antigua de Vue CLI no acepta el CSS moderno de Tailwind 4, revisa la compatibilidad de sus procesadores y planifica la migración a Vite; conserva la versión de Tailwind compatible con tu proyecto mientras la resuelves. La compatibilidad concreta depende de las versiones instaladas y debe comprobarse con el build del proyecto existente.
Consulta el estado oficial de Vue CLI, la instalación de Tailwind CLI y optimization.minimize en Webpack.
Sigue leyendo
Una idea lleva a otra.
)
)
)