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.

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.

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.

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.

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

Simplemente ejecuta los siguientes comandos en tu terminal:

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.

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.

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.