Instalar Tailwind CSS en Vue 3

Para instalar Tailwind CSS en Vue 3 simplemente debemos seguir unos sencillos pasos, aunque en el momento de crear esta entrada existen problemas que hacen que este proceso no sea tan rápido y automático.

En nuestro caso vamos a hacer un setup completo creando un proyecto Vue 3 con Vue CLI 4.5 o superior, que es la necesaria para trabajar con Vue 3.

vue create vue3-tailwindcss

Mi configuración de Vue 3 para este proyecto es Vue 3, Babel, Router, Vuex, Linter, Unit.

Una vez hemos creado nuestro proyecto, vamos a instalar las dependencias necesarias.

npm install tailwindcss

Ahora vamos el archivo mínimo que necesita Tailwind CSS para empezar a funcionar, que estará en el directorio src/assets/css y vamos a llamar tailwind.css por convención.

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

Con todo lo anterior, ya estamos en disposición de actualizar nuestro archivo src/main.js con lo siguiente y lanzar el servidor de desarrollo.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// añadimos tailwind css
import "@/assets/css/tailwind.css";

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

npm run serve

Si al lanzar el servidor de desarrollo encuentras el siguiente problema:

Simplemente ejecuta los siguientes comandos en tu terminal:

# desinstalamos
npm uninstall tailwindcss postcss autoprefixer

# instalamos las versiones correctas
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

En este momento ya deberías poder lanzar tu servidor de desarrollo con Vue 3 sin ningún problema. Extra: Extender la configuración de Tailwind CSS en Vue 3 Para llevar a cabo una configuración completa de Tailwind CSS en Vue 3, vamos a añadir la configuración necesaria para personalizar al máximo este poderoso framework CSS.

Para ello, lo primero que necesitamos hacer es crear un archivo postcss.config.js en la raíz de nuestro proyecto. Este archivo nos permitirá personalizar la apariencia de nuestros sitios utilizando Tailwind CSS y JavaScript.

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

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

Una vez tenemos configurado postcss, simplemente debemos añadir el archivo de configuración tailwind.config.js en la raíz de nuestro proyecto y todo empezará a funcionar.

const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        screens: {
            sm: '480px',
            md: '768px',
            lg: '976px',
            xl: '1440px',
        },
        colors: {
            gray: colors.coolGray,
            blue: colors.lightBlue,
            red: colors.rose,
            pink: colors.fuchsia,
        },
        fontFamily: {
            sans: ['Graphik', 'sans-serif'],
            serif: ['Merriweather', 'serif'],
            mono: ['ui-monospace', 'SFMono-Regular'],
        },
        extend: {
            spacing: {
                '128': '32rem',
                '144': '36rem',
            },
            borderRadius: {
                '4xl': '2rem',
            }
        }
    }
}

Para probar todo nuestro trabajo, basta con actualizar el componente App.vue con lo siguiente, verás que tanto las fuentes como los colores hacen su trabajo.

<template>
  <div class="text-red-600 font-mono text-3xl font-bold">Tailwind CSS en Vue 3</div>
</template>