Cómo usar Tailwind CSS con Vue y Vite

Este tutorial lo guiará a medida que configura Tailwind CSS en un proyecto de Vue 3 y Vite.

Al seleccionar de las clases de CSS prefabricadas del marco, Tailwind CSS, un marco de CSS de primera utilidad, hace que sea muy simple aplicar un estilo fantástico a su aplicación en línea Vue 3. Debido a su diseño simple, Tailwind CSS es uno de los marcos CSS más utilizados en la actualidad. También acelera sustancialmente los procesos de diseño y desarrollo. Si no está familiarizado con Tailwind CSS, la página principal del proyecto en https://tailwindcss.com/ podría servir como un buen punto de partida.

Solo se necesitan unos pocos pasos sencillos para configurar su proyecto Vue 3 con Vite para que pueda usar Tailwind CSS. Puede aprender cómo instalar Tailwind CSS en su proyecto Vue y comenzar a usar sus clases CSS para diseñar en el tutorial que sigue.

Paso 1: Cree el proyecto Vite en el paso uno.

Configurar un nuevo proyecto de Vue usando vite-create es el primer paso. Pon el siguiente comando:

npm create vite my-project

Esto crea un nuevo proyecto en la carpeta my-project:

Debe especificar qué marco y variante usar al ejecutar el proceso vite-create. Elija la opción vue en ambas situaciones.

Para asegurarse de que las dependencias predeterminadas de la carpeta del proyecto estén instaladas, debe ir a la carpeta del proyecto recién creada y ejecutar npm install:

Instale los requisitos de Tailwind CSS en el paso dos.

Tan pronto como el proyecto esté terminado, podemos usar el Node Package Manager (NPM) para continuar instalando las dependencias requeridas por Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

Además, se deben usar comandos para construir los archivos de configuración Tailwind CSS en los proyectos.

npx tailwindcss init -p

Paso 3: en los archivos de configuración de Tailwind, especifique la ruta de la plantilla.

Como puede ver en la captura de pantalla adjunta, debemos ingresar las URL de nuestro archivo de plantilla en la matriz de contenido del archivo de configuración de Tailwind recién formado tailwind.config.cjs.

Paso 4: agregue directivas Tailwind a CSS

Eliminar el código CSS predeterminado del archivo ./src/estilo.css y agregue las tres líneas de código que contienen las directivas de Tailwind a continuación:

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

Paso 5: Usa las clases CSS de Tailwind en tu proyecto

Ahora podemos usar las clases CSS de Tailwind en nuestro proyecto, como se ve en el siguiente ejemplo en la sección de plantilla del archivo ./src/App.js:

<template>
   <div class="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
     <p class="text-3xl text-gray-700 font-bold mb-5">
       Welcome!
     </p>
     <p class="text-gray-500 text-lg">
       Vue and Tailwind CSS in action
     </p>
  </div>
</template>

Primero debe iniciar el servidor web de desarrollo con el comando npm run dev para verificar el resultado en el navegador:

A continuación, se puede acceder a la salida de la aplicación a través de un navegador. El siguiente resultado debería estar visible cuando las clases CSS de Tailwind se hayan aplicado correctamente: