)
Objetivo y requisitos
Añadiremos Tailwind CSS 4 a una aplicación Vue 3 con Vite. Parte de un proyecto creado con npm create vue@latest, instala sus dependencias y usa una versión de Node compatible con el Vite de tu proyecto. En una app existente conserva tus alias, plugins y demás opciones de configuración.
Instala Tailwind y su plugin de Vite
npm install tailwindcss @tailwindcss/vite
Configura ambos plugins
En vite.config.ts, Tailwind se añade junto al plugin de Vue. No reemplaces vue() por tailwindcss(): necesitas el primero para compilar archivos .vue.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()],
})
Si ya existe una lista de plugins, añade tailwindcss() sin eliminar los demás. Un proyecto creado con create-vue ya incluye @vitejs/plugin-vue.
Importa el CSS una vez
En src/assets/main.css:
@import "tailwindcss";
En una app mínima, src/main.ts queda así. En tu app conserva también el router, Pinia u otros plugins que ya utilices:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
Comprueba las utilidades
Usa este contenido en src/App.vue:
<template>
<main class="min-h-screen bg-slate-950 p-8 text-white">
<h1 class="text-3xl font-bold text-emerald-400">Vue + Tailwind 4</h1>
<p class="mt-4">El proyecto ya compila componentes y utilidades.</p>
</main>
</template>
Ejecuta npm run dev: debes ver un fondo oscuro y un título verde. Después ejecuta npm run build y npm run preview para comprobar el resultado de producción.
Errores frecuentes
Si Vite no interpreta un archivo .vue, revisa que siga presente vue(). Si no aparecen estilos, confirma el import de main.css y el plugin de Tailwind. Evita construir nombres de clases por concatenación: Tailwind detecta nombres completos en el código fuente. Para esta instalación de la versión 4 no necesitas copiar las antiguas directivas @tailwind base, components y utilities de una guía de la versión 3.
Consulta la instalación oficial de Tailwind con Vite y el plugin oficial de Vue para Vite.
Sigue leyendo
Una idea lleva a otra.
)
)
)