Cómo usar Tailwind CSS con Vue.js

En Vue.js, ademas de añadir nuestros estilos CSS podemos usar bibliotecas predefinidas de estilos. Por ejemplo, hoy veremos cómo usar Tailwind CSS en nuestro proyecto.

Tailwind CSS es un framework de utilidades CSS muy popular por si sencillez y rapidez de uso para los programadores.

Tailwind CSS proporciona clases predefinidas para diseñar interfaces directamente en el HTML. Esto lo hace altamente compatible con frameworks como Vue.js, basados en componentes.

Vamos a ver cómo configurar y usar Tailwind en nuestro proyecto de Vue.js 👇.

Configuración de Vue + Vite + Tailwind CSS

Para instalar Tailwind CSS para usarlo en Vue + Vite, simplemente hacemos lo siguiente.

npm install -D tailwindcss @tailwindcss/vite

Una vez instalado, modificamos el fichero de configuración de Vite para usar Tailwind CSS. Para ello, editamos el archivo vite.config.js y registramos el plugin de Tailwind:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // asi

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

A continuación, debemos crear e importar el archivo de estilos. Para ello, creamos un archivo src/style.css (o el nombre que prefieras) y añade:

@import "tailwindcss";

Finalmente, en tu archivo src/main.js importamos este archivo de estilos,

import './style.css'

¡Así de fácil! ✅ Ahora puedes utilizar las clases utilitarias de Tailwind CSS directamente en tus componentes de Vue.

Ejemplo básico

Para comprobar que todo funciona, lo mejor es que hagamos un pequeño ejemplo,

<template>
  <h1 class="text-3xl font-bold text-blue-600 text-center mt-10">
    ¡Hola, Tailwind v4!
  </h1>
</template>

Si todo ha salido correctamente, verás tu texto estilizado con los estilos de Tailwind CSS.

Uso con variables reactivas

Por supuesto podemos usar las variables reactivas de Vue, junto con las clases de TailwindCSS, igual que haríamos con cualquiera de nuestras clases.

Vamos a verlo con un ejemplo,

<template>
  <div 
    :class="[
      'p-4 rounded-md',
      isActive ? 'bg-green-100 border-green-500' : 'bg-gray-100'
    ]"
  >
    <!-- Resto del contenido -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
</script>