Instalar Tailwind CSS 4 con Vue 3 - 38

Ahora sí vamos a instalar Tailwind CSS en su versión 4 junto con un proyecto en Vue 3, los pasos son los mismos a si estas empleando un proyecto en Node sin Vue salvo por el archivo de configuración de vite que ya existe en Vue y no hay que volverlo a crear; instalamos el framework y su plugin para vite:

$ npm install tailwindcss @tailwindcss/vite

Archivo CSS

Creamos main.css puede tener obviamente cualquier nombre y aquí lo importante es cargar el módulo de Tailwind:

src\css\main.css

@import "tailwindcss";

Referenciar el CSS

Referenciamos el archivo CSS definido anteriormente, en este ejemplo, desde el archivo de arranque de Vue:

src\main.js

import { createApp } from 'vue'
import "./css/main.css"
import axios from "axios"
// ***

vite.config

Ya tenemos el archivo de vite.config.js, a diferencia de versiones anteriores de Tailwind, Tailwind ya autoescanea nuestros archivos para determinar cuáles clases tiene que emplear; agregamos el plugin de vite para Tailwind:

vite.config.js

***
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
 plugins: [
   vue(),
   tailwindcss(),
   vueDevTools(),
 ],
 ***
})