¿Cómo integrar Tailwind 4 en Vue.js 3 + Vite?

Sí, en Tailwind CSS 4 la instalación se ha simplificado aún más con un plugin oficial para Vite, eliminando la necesidad de configurar PostCSS manualmente. Ahora, para integrar Tailwind en un proyecto Vue 3 con Vite, solo necesitas seguir estos pasos:

1. Instalar Tailwind CSS y el plugin de Vite

   npm install tailwindcss @tailwindcss/vite

2. Configurar el plugin en vite.config.ts

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [tailwindcss()],
   })

3. Importar Tailwind en tu CSS

   @import 'tailwindcss';

4. Importar tu archivo main.css en src/main.ts

import '@/assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

¡Listo!

Con esto, Tailwind CSS 4 queda completamente integrado en tu proyecto Vue 3, con detección automática de contenido y sin necesidad de configuración adicional.

Este nuevo método reduce las dependencias, acelera la compilación y aprovecha las últimas mejoras del ecosistema web. ¡Pruébalo y empieza a construir con Vue y Tailwind 4 de la manera más optimizada!