Instalar Tailwind CSS con Vue 3 + Vite

Introducción

En esta ocasión les voy a mostrar cómo instalar Tailwind CSS en un proyecto Vue 3 + Vite

Creando un proyecto con Vue + Vite

Vamos a crear un proyecto Vite nuevo o podemos omitir este paso si ya tienen un proyecto iniciado

npm init @vitejs/app {nombre-del-proyecto}

Vamos instalar las dependencias para nuestro proyecto y comprobar nuestra instalación de la siguiente manera

cd {nombre-del-proyecto}

npm install

npm run dev

Agregando Tailwind CSS

Lo primero es instalar Tailwind utilizando npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

El siguiente paso es generar nuestros archivos de configuración tailwind.config.js y postcss.config.js

npx tailwindcss init -p

El comando anterior genera dos archivos en la raíz del proyecto, el primero tailwind.config.js

// tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

El otro archivo generado es postcss.config.js

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Ahora vamos a incluir Tailwind en nuesto archivo de estilos, para esto vamos a crear el archivo ./src/index.css y vamos a agregar lo siguiente

/* ./src/index.css */

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

Ya para concluir con la con la configuración vamos a importar el archivo ./src/index.css en nuestro archivo ./src/main.js

/* ./src/main.js*/

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

createApp(App).mount('#app');

Hemos finalizado con la configuración de Tailwind CSS ya solo tenemos que ejecutar npm run dev y lo podemos usar en nuestras aplicaciones