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

Tailwind CSS 4 ha llegado con una arquitectura optimizada para rendimiento y flexibilidad, ofreciendo compilaciones hasta 5 veces más rápidas y un flujo de trabajo más ágil. En este post, exploraremos cómo integrar esta nueva versión con Vue 3, aprovechando características como la detección automática de contenido, el nuevo motor de alto rendimiento, las variables CSS nativas y la compatibilidad con Vite. Si quieres construir interfaces modernas con menos configuración y más poder, acompáñame en esta guía donde aprenderás a instalar, configurar y usar Tailwind CSS 4 en Vue 3. 🚀

tailwind 4 and vue js 3

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!