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.
Primero agregamos la dependencia:
npm install -D tailwindcss postcss autoprefixer
Hacemos el init:
npx tailwindcss init -p
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
.
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.
En este post te enseñaré a imprimir HTML en una impresora térmica. Vas a ser…
En este artículo te voy a enseñar a monitorear la cola de impresión de una…
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
Esta web usa cookies.