Guía rápida: Integrando Tailwind CSS 4 en proyectos con Vue CLI

Para integrar Tailwind CSS 4 en un proyecto con Vue CLI, primero debemos instalar las siguientes dependencias. Puedes usar el gestor de paquetes que prefieras:

pnpm add tailwindcss @tailwindcss/cli @tailwindcss/postcss postcss

Debemos crear el archivo postcss.config.mjs en la raíz del proyecto, debe de contener la siguiente configuración.

export default {
 plugins: {
 "@tailwindcss/postcss": {},
 }
}

Luego debes de crear un archivo css main.css donde creas conveniente, en mi caso lo crearé dentro de src/assets/

@import "tailwindcss";

Ahora viene un paso muy importante para poder ver los estilos utilitarios de tailwind que vas colocando en el proyecto.

Primero debes instalar una dependencia de desarrollo llamada npm-run-all

pnpm add -D npm-run-all

Luego vas a ir a tu archivo package.json y en la parte de scripts vas a agregar los siguientes scripts.

{
 "scripts": {
    "serve": "vue-cli-service serve",
    "build:app": "vue-cli-service build",
    "build": "npm-run-all tailwind:build build:app",
    "dev": "npm-run-all --parallel tailwind:watch serve",
    "tailwind:watch": "pnpm tailwind:build --watch",
    "tailwind:build": "tailwindcss -i ./src/assets/main.css -o ./src/assets/tailwind-output.css"

    ...otros scripts de tu proyecto
  },
}

A continuación te explicaré que hace cada script que acabamos de agregar.

1. build:app: Lo que hace este script es hacer el build de toda la vida con Vue CLI.

2. build: Este script compila Tailwind y construye la aplicación simultáneamente con npm-run-all.

3. dev: Inicia el servidor de desarrollo de Vue CLI y ejecuta tailwind:watch para observar cambios en los estilos.

4. tailwind:watch: Este script ejecuta tailwind:build y, con el flag --watch, observa los cambios en el proyecto para actualizar el CSS automáticamente.

5. tailwind:build: aquí gracias a CLI de tailwind podemos configurar cual va a ser el input (-i) css de tailwind y podemos configurarle el output (-o), con esto el objetivo es que este script solo se encargue de generar el CSS de Tailwind.

Después de agregar los scripts correspondientes en tu archivo principal del proyecto que vendría a ser src/main.js|ts , añade el output final de tailwind para que tu proyecto lo pueda leer.

import '@/assets/tailwind-output.css'

Como paso final debemos de agregar una configuración adicional al vue.config.js (Aquí solo incluiré la configuración necesaria, pero si tienes mas configuraciones deberás de adaptarla a la de tu proyecto)

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  css: {
    extract: true
  },
  configureWebpack: {
    optimization: {
      minimize: false
    }
  }
})

css.extract: Esta opción indica que los estilos CSS deben ser extraídos en archivos CSS separados en lugar de ser incluidos en el JavaScript. Esto es útil para mejorar el rendimiento de la carga de la página y para facilitar la gestión de los estilos.

configureWebpack.optimization.minimize: Esta sección permite personalizar la configuración de Webpack. En este caso, se está desactivando la minimización del código JavaScript (minimize: false).

Para poder hacer una prueba en desarollo simplemente ejecuta el script dev y para poder probar el build de tu app, podrías probar lo siguiente:

npx http-server ./dist -p 7001

Con eso obtendrás una URL local para poder probar el build final de tu aplicación.

Conclusión:

Con esta configuración, tendrás Tailwind CSS 4 funcionando en un proyecto con Vue CLI de manera eficiente. Ahora puedes comenzar a construir tu aplicación con estilos utilitarios optimizados.