- Published on
Instalar Tailwind CSS con Vue 3 y Vite
- Authors
- Name
- Fabián Karaben
- @fab_k_dev
Configuración de Tailwind CSS en un proyecto de Vue 3 y Vite.
1- Crea tu proyecto
Comienza creando un nuevo proyecto de Vite si aún no tienes uno configurado. El enfoque más común es usar Create Vite.
npm init vite my-project
cd my-project
2- Instalar Tailwind CSS
Instala tailwindcss
y sus dependencias de pares a través de npm
y luego ejecuta el comando init
para generar tanto tailwind.config.js
como postcss.config.js
.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3- Configura tus rutas de plantilla
Agrega las rutas a todos tus archivos de plantilla en tu archivo tailwind.config.js
:
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
4- Agregue las directivas de Tailwind a tu CSS
Crea un archivo ./src/index.css
y agrega las directivas @tailwind
para cada una de las capas de Tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;
5- Importar el archivo CSS
Importa el archivo ./src/index.css
recién creado en tu archivo ./src/main.js
:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
6- Comienza tu proceso build
Ejecuta tu proceso de compilación con npm run dev
:
npm run dev
7- Comienza a usar Tailwind en tu proyecto
Comienza a usar las clases de utilidad de Tailwind para diseñar tu contenido:
Veamos un ejemplo en el archivo App.vue
:
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>