Tailwind CSS con Vue 3 y Vite

En este post te voy a enseñar a agregar Tailwind CSS a un proyecto de Vue 3. Básicamente es seguir la guía oficial, pero con unos pasos extra desde mi experiencia.

Tailwind con Vue 3

Primero agregamos la dependencia:

npm install -D tailwindcss postcss autoprefixer

Hacemos el init:

npx tailwindcss init -p

Configurar Tailwind CSS con Vue 3

Ahora es momento de configurar tailwind.config.js y es en donde encontramos la primera diferencia, pues además de los archivos js, ts, etcétera hay que agregar los componentes de Vue, quedando, al menos en mi caso así:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Fíjate en que en content he agregado la carpeta src, todas sus subcarpetas y archivos con extensiones js, ts, etcétera pero también la de los componentes de Vue, es decir, la extensión vue.

Agregando directivas e importando CSS

Después agregué las directivas de Tailwind al main.css que en mi caso se encuentra dentro de src/assets:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ese archivo es importado en el main.ts o main.js dependiendo del lenguaje de programación que utilices, en mi caso está así:

import './assets/main.css'

import { createApp } from 'vue'
// ... más líneas

Una vez hecho eso puedes ejecutar npm run dev o el comando que utilices para tu proyecto y ya podrás usar las clases CSS de Tailwind con tu proyecto de Vue 3 directamente en los componentes de Vue.

Si quieres ver un ejemplo real, revisa mi diseñador para impresoras térmicas; ahí he usado Tailwind CSS usando esta misma configuración.