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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *