Creación de componentes de Vue 3 con Tailwind CSS

Vue es un framework popular de JavaScript para crear interfaces web versátiles. Algunas de sus características más atractivas son su fácil integración en bases de código existentes y su ligereza, que facilita a los desarrolladores empezar a usarlo en sus proyectos de frontend.

Vue se basa en un enfoque de componentes componibles para crear aplicaciones web de interfaz de usuario. Los componentes son fragmentos de código reutilizables que puedes usar como bloques de construcción de tus aplicaciones. El modelo de componentes de Vue te permite crear componentes independientes con lógica, contenido y estilos en un mismo lugar.

Al aplicar estilos a estos componentes, puedes usar un framework como Tailwind CSS para incluir los estilos directamente en el marcado y encapsular aún más el componente. Tailwind CSS es un framework de CSS que incorpora clases reutilizables para aplicar estilos a elementos de la interfaz de usuario (UI). Puedes usar estas clases para aplicar elementos de estilo como fuentes, colores, rellenos, márgenes, animaciones y transiciones. Por ejemplo, el atributo text-black mostrará todo el texto de un elemento en color negro. Estas clases son componibles y puedes combinarlas para implementar cualquier diseño.

En este tutorial aprenderás a crear componentes de Vue 3 con Tailwind CSS mediante la creación de una tarjeta de artículo adaptable. El código completo del proyecto está disponible aquí.

Requisitos previos

Para seguir este tutorial, necesitarás:

• Una versión actualizada de Node.js y npm instalados

• Un editor de texto como Visual Studio Code (VS Code)

• Conocimientos de la línea de comandos

• Familiaridad con Vue y CSS

Cómo crear tus propios componentes de Vue 3 con Tailwind

Para empezar, crea un nuevo proyecto de Vue 3. Ejecuta el siguiente comando en la terminal para instalar y ejecutar create-vue, la herramienta oficial de Vue para crear la estructura inicial de proyectos basados en vite:

1npm init vue@latest

Verás una lista de funciones opcionales. Asigna el nombre vue-tailwindcss al proyecto y elige No para el resto de las opciones.

1√ Project name: ... vue-tailwindcss
2√ Add TypeScript? ... No / Yes
3√ Add JSX Support? ... No / Yes
4√ Add Vue Router for Single Page Application development? ... No / Yes
5√ Add Pinia for state management? ... No / Yes
6√ Add Vitest for Unit Testing? ... No / Yes
7√ Add an End-to-End Testing Solution? » No
8√ Add ESLint for code quality? ... No / Yes
9√ Add Prettier for code formatting? ... No / Yes

Ahora, ve a la carpeta del proyecto con cd vue-tailwindcss y ejecuta npm install para instalar desde npm las dependencias de código abierto del proyecto.

Ejecuta npm run dev para iniciar la aplicación en un entorno de desarrollo.

Este comando debería iniciar la aplicación en el servidor local:

Ve a la URL local indicada para ver la aplicación:

Ahora es momento de configurar Tailwind CSS en la aplicación de Vue.

Cómo configurar Tailwind con Vue

Para empezar, ejecuta el siguiente comando en la terminal:

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

Este comando instala Tailwind CSS y sus dependencias de pares (autoprefixer y postcss) mediante npm.

A continuación, genera los archivos tailwind.config.js y postcss.config.js ejecutando el siguiente comando. Usarás estos archivos para configurar y personalizar Tailwind:

1npx tailwindcss init -p

Este comando debería crear tailwind.config.js en la raíz del proyecto con estos detalles:

1   module.exports = {
2   content: [],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7 }

También creaste postcss.config.js y configuraste los complementos tailwindcss y autoprefixer:

1  module.exports = {
2   plugins: {
3     tailwindcss: {},
4     autoprefixer: {},
5   },
6 }

En tailwind.config.js, modifica el arreglo content para incluir todas las rutas de tus páginas y componentes. Así configurarás Tailwind para que elimine las clases CSS no utilizadas del resultado final y reduzca el tamaño del archivo.

Tu archivo tailwind.config.js debería verse así:

1  module.exports = {
2   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7  };

A continuación, crea un archivo llamado index.css en la carpeta src del proyecto y agrega lo siguiente:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Usaste la directiva @tailwind para incluir en el proyecto los estilos base, de componentes y de utilidades de Tailwind. Más adelante, al compilar el proyecto, Tailwind reemplazará automáticamente estas directivas por los estilos que especificaste.

Ahora, importa index.css en nuestro archivo ./src/main.js para empezar a usarlo:

1import './index.css'

Ten en cuenta que debes eliminar la línea que importa el archivo assets/main.css. Así evitarás usar CSS convencional.

Ahora puedes empezar a crear componentes con Tailwind.

Cómo crear componentes de Vue

Para aprender a usar Tailwind en componentes de Vue, crea un componente de tarjeta para un artículo.

Luego, crea un archivo llamado ArticleCard.vue en la carpeta src/components. Agrega el siguiente código:

1<template>
2  <div>
3    <div>
4      <img src="../assets/coverimage.jpg" alt="Close-up of code" />
5    </div>
6    <div>
7      <div>Vue</div>
8      <a href="#">Building Vue 3 Components With Tailwind CSS</a>
9      <p>
10        Learn how to create visually stunning Vue components using the popular
11        utility-first CSS framework Tailwind.
12      </p>
13    </div>
14  </div>
15</template>

El código anterior crea una plantilla llamada ArticleCard, que define un componente de tarjeta compuesto por una imagen y una descripción informativa del artículo.

Para mostrarlo en el navegador, limpia la página de inicio eliminando todo el contenido del archivo App.vue. Luego, importa el componente ArticleCard en la sección de script de App.vue:

1<script setup>
2import ArticleCard from "./components/ArticleCard.vue";
3</script>

Luego, úsalo en la plantilla:

1<template>
2  <ArticleCard />
3</template>

El siguiente paso es aplicar estilos a la tarjeta con las clases de utilidad de Tailwind CSS.

Explicación de las clases de utilidad

Con CSS convencional y algunos otros frameworks de CSS, puedes usar clases de CSS personalizadas para aplicar estilos a los elementos de una página.

Este es un ejemplo de un elemento de enlace con estilos aplicados mediante las clases link-wrapper y link:

1<template>
2  <div class="link-wrapper">
3    <a href="#" class="link">Building Vue 3 Components With Tailwind CSS</a>
4  </div>
5</template>
6<style>
7.link-wrapper {
8  padding: 8px;
9}
10.link {
11  font-weight: 500;
12  font-size: 1.125rem;
13  line-height: 1.75rem;
14  color: #000;
15}
16</style>

¿Por qué usar Tailwind CSS?

El problema de este enfoque es que debes generar nombres de clase significativos cada vez que necesitas aplicar estilos a un elemento. Como alternativa, debes recordar un nombre extremadamente largo y descriptivo cada vez que quieras reutilizar una clase. También tienes que escribir mucho código CSS, ya que cada nombre de clase que agregas a una página viene acompañado de estilos. Por eso, a medida que crece tu aplicación, también crecen los archivos CSS, lo que aumenta el tamaño del paquete y hace que los tiempos de carga sean más lentos.

Sin embargo, en Tailwind CSS puedes usar clases CSS predefinidas llamadas clases de utilidad. Estas clases ofrecen opciones de estilo comunes como flex, alineación del texto, bordes, márgenes, relleno y color. Te permiten aplicar estilos a las páginas sin escribir CSS.

Veamos cómo quedaría el ejemplo anterior del enlace con estilos de Tailwind CSS:

1<div class="p-8">
2    <a href="#" class="font-medium text-lg text-black">Vue + TailwindCSS</a>
3</div>

Ahora reemplazaste el objeto de estilos y las clases personalizadas por las siguientes clases de utilidad:

• p-8 establece el relleno en 8 px.

• font-medium establece el grosor de la fuente en 500 px.

• text-xl establece el tamaño de la fuente en 1.125 rem y la altura de línea en 1.75 rem.

• text-black establece el color del texto en negro.

Usar clases de utilidad reduce la cantidad de CSS y facilita que cualquier persona que revise el código entienda la intención de los estilos aplicados a los elementos, sin tener que consultar una hoja de estilos.

Tailwind ofrece una variedad de clases de utilidad, que puedes encontrar en su documentación de utilidades.

Cómo aplicar estilos a un componente de tarjeta con Tailwind CSS

Ahora que ya conoces las clases de utilidad, es momento de aplicar estilos al componente de tarjeta.

Empieza por modificar el archivo src/components/ArticleCard.vue para que use las clases de utilidad de Tailwind:

1<template>
2  <div class="flex max-w-2xl mx-auto bg-white rounded-sm shadow-md">
3    <div>
4      <img
5        class="h-full w-full object-cover"
6        src="../assets/coverimage.jpg"
7        alt="Closeup code"
8      />
9    </div>
10    <div class="p-8">
11      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
12        Vue
13      </div>
14      <a
15        href="#"
16        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
17        >Building Vue 3 Components With Tailwind CSS
18      </a>
19      <p class="mt-2 text-sm text-slate-500">
20        Learn how to create visually stunning Vue components using the popular
21        utility-first CSS framework Tailwind.
22      </p>
23    </div>
24  </div>
25</template>

Con los nuevos estilos, el componente de tarjeta debería verse así:

Además de las clases de utilidad, usaste modificadores para aplicar estilos a la tarjeta. Observa la clase hover:underline de la etiqueta <a/>, donde hover es el modificador.

En Tailwind, coloca los modificadores al principio del nombre de una clase de utilidad para describir el estado al que quieres apuntar. En el ejemplo anterior, apuntaste al estado hover, pero también podrías apuntar al estado focus con la clase focus:text-violet-200 o al estado active con active:text-violet-600.

Puedes usar distintos modificadores de Tailwind CSS según la condición a la que quieras apuntar. Para ver la lista completa, consulta la documentación de Tailwind CSS.

Hasta ahora, el componente de tarjeta se ve muy bien en pantallas grandes, pero a medida que reduces el tamaño de la pantalla, se ve cada vez más apretado:

Por suerte, puedes cambiar el diseño de la tarjeta según el ancho de la pantalla.

Cómo manejar los puntos de quiebre en Tailwind CSS

Tailwind CSS te permite aplicar condicionalmente una clase de utilidad en distintos puntos de quiebre. De forma predeterminada, hay cinco puntos de quiebre, cada uno se activa a partir de un ancho mínimo determinado:

• sm — 640 px

• md — 768 px

• lg — 1024 px

• xl — 1280 px

• 2xl — 1536 px

Para manejar un punto de quiebre, agrega su prefijo a la clase de utilidad, seguido de dos puntos (:).

1breakpoint:utility-class

Considera el siguiente botón:

1<button class="w-16 md:w-32 lg:w-48">
2  Submit
3</button>

Tailwind aplica la clase w-16 en pantallas pequeñas, w-32 en pantallas medianas y w-48 en pantallas grandes.

Puedes usar puntos de quiebre para cambiar el diseño, el tamaño, el color o cualquier otra propiedad sin usar consultas de medios. También puedes personalizar los tamaños de pantalla en tailwind.config.js si los tamaños predeterminados no se ajustan a las necesidades de tu diseño.

Por ejemplo, el siguiente código reemplazará el tamaño de pantalla lg:

1module.exports = {
2  theme: {
3    extend: {
4      screens: {
5        'lg': '960px',
6      },
7    },
8  },
9}

En el componente de tarjeta de artículo, usa puntos de quiebre para cambiar el diseño de la tarjeta y ajustar el tamaño de la imagen:

A continuación se muestra el código modificado. Observa las primeras etiquetas <div/> y <img/>:

1<template>
2  <div
3    class="md:flex md:max-w-2xl max-w-md mx-auto bg-white rounded-sm shadow-md overflow-hidden"
4  >
5    <div>
6      <img
7        class="h-48 w-full object-cover md:h-full"
8        src="../assets/coverimage.jpg"
9        alt="Closeup code"
10      />
11    </div>
12    <div class="p-8">
13      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
14        Vue
15      </div>
16      <a
17        href="#"
18        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
19        >Building Vue 3 Components With Tailwind CSS</a
20      >
21      <p class="mt-2 text-sm text-slate-500">
22        Learn how to create visually stunning Vue components using the popular
23        utility-first CSS framework Tailwind.
24      </p>
25    </div>
26  </div>
27</template>

Estos son los cambios que hiciste:

• Los modificadores md:flex y md:max-w-2xl convierten el componente de tarjeta en un contenedor flex con un ancho máximo de 48 rem en pantallas medianas y grandes. En pantallas pequeñas, la clase max-w-md establece el ancho en 28 rem.

• En el elemento <img/>, md:h-full muestra la imagen a altura completa en pantallas medianas y grandes, y la clase h-48 establece la altura en 12 rem en pantallas más pequeñas.

El componente resultante se ve así en una pantalla pequeña:

¡Eso es todo! Ahora puedes crear componentes de Vue con Tailwind CSS.

Cuando termines de crear una aplicación de Vue, puedes aprender cómo implementarla en Netlify con actualizaciones de seguridad automáticas de Snyk. Crea una cuenta gratis e importa tu proyecto a Snyk hoy mismo para encontrar y corregir las vulnerabilidades que puedan estar ocultas en las dependencias de tu proyecto, y proteger tu aplicación contra XSS y otras amenazas de seguridad.

Conclusión

En este tutorial aprendiste a crear un componente de Vue 3 con Tailwind CSS. Tailwind CSS es un framework basado en utilidades que permite trabajar de forma más eficiente y optimizada al crear componentes de interfaz de usuario. Puedes usar clases de utilidad para crear diseños adaptables sin consultar hojas de estilo externas ni memorizar decenas de nombres de clases. Tailwind te permite crear tu propio sistema de diseño personalizando las clases predeterminadas. Además, elimina automáticamente todas las clases que no se usan en la compilación de producción, lo que ayuda a incluir menos código en el producto final.