Simplifica tu diseño con Nuxt y Tailwind

En el panorama cambiante del diseño y desarrollo web, la eficiencia y la estética van de la mano. Con herramientas como Nuxt y Tailwind, puedes lograr una combinación perfecta de ambas aprovechando las estructuras de archivos CSS adecuadas. Bienvenido a nuestro tutorial sobre 'Simplifica tu diseño con Nuxt y Tailwind'. Si es un desarrollador experimentado familiarizado con la comunidad Nuxt y los servicios de desarrollo de Vue o un diseñador principiante que recién comienza a explorar las clases de viento de cola, esta guía lo guiará a través de los pasos para integrar estas poderosas herramientas. Al asegurarse de que sus sitios web no solo sean visualmente atractivos con atributos de datos dinámicos, sino que también estén optimizados para el rendimiento, estará equipado para disfrutar de lo mejor de ambos mundos. ¡Sumérgete y descubre la sinergia de Nuxt y Tailwind!

¿Qué es Nuxt.js?

Nuxt.js es un marco gratuito y de código abierto creado sobre Vue.js. Es bastante obstinado, especialmente cuando lo comparas con Next.js de React. Esta sólida herramienta permite a los desarrolladores instalar dependencias desde su repositorio y crear aplicaciones Vue.js de nivel empresarial con capacidades SSR (renderización del lado del servidor). Nuxt.js viene con rutas de plantilla basadas en archivos, división de código, importaciones automáticas, utilidades de recuperación de datos compatibles con SSR, compatibilidad con TypeScript y herramientas de creación de Vite listas para usar.

Pero, ¿qué es el renderizado del lado del servidor y por qué es bueno?

En términos sencillos, con marcos como Nuxt.js y Next.js (para desarrolladores de React), los desarrolladores pueden escribir aplicaciones de pila completa sin crear un servidor de módulos en línea a través de Node.js, Express.js, Nest.js o cualquier otro lenguaje o marco. SSR nos permite escribir todo lo relacionado con nuestras aplicaciones dentro de un mismo código base, en un mismo proyecto. SSR también es muy bueno para SEO (optimización de motores de búsqueda), tiempo de carga inicial más rápido, rendimiento mucho mejor con dispositivos de gama baja y almacenamiento en caché más sencillo.

¿Qué es Tailwind CSS?

Tailwind CSS es un marco CSS muy popular que ayuda a los desarrolladores a escribir código CSS más rápido, más legible y fácil de mantener. Con su configuración única de viento de cola, la personalización se vuelve muy sencilla. Si bien Nuxt.js ya proporciona su propia sección CSS en el componente, lo que facilita una configuración del servidor de desarrollo más fluida, la integración de Tailwind CSS ofrece un enfoque diferente. Puede parecer desalentador al principio, pero aumenta enormemente la productividad de los desarrolladores una vez que superan la curva de aprendizaje inicial.

En el siguiente tutorial, crearemos un proyecto Nuxt.Js desde cero, le agregaremos Tailwind CSS y crearemos una aplicación de blogs simple. En lugar de centrarnos en la lógica, centrémonos en cómo utilizar Nuxt.js y Tailwind CSS juntos.

Cómo instalar Tailwind CSS y Nuxt.JS

Para comenzar a integrar Nuxt.js con Tailwind CSS, asegúrese de tener todas las dependencias de instalación del repositorio necesarias. Comience instalando Nuxt.js. Después de la instalación, es fundamental comprobar las dependencias entre pares. Una vez que todo esté configurado, puede continuar con la configuración de su servidor de desarrollo. Utilice el siguiente comando de terminal para inicializar su proyecto:

 npx nuxi@latest init <nombre-proyecto>

Aquí, en lugar del nombre del proyecto, es posible que desee escribir el nombre de su proyecto; en nuestro caso es nuxt-tailwind.

Después de la instalación, debemos ingresar a este directorio y ejecutar npm install o Yarn para instalar las dependencias.

Entonces, necesitamos instalar Tailwind CSS para poder usarlo con Nuxt.js. Ahora bien, la documentación oficial a veces puede causar problemas. Pero el método que vamos a seguir funciona perfectamente al momento de escribir este artículo. Agreguemos Tailwind CSS como un módulo de Nuxt.js. Para hacer esto, dentro del directorio que acabamos de crear con nuxt CLI, ingresaremos este comando en la terminal

 hilo agregar -D @nuxtjs/tailwindcss@latest

A continuación, iremos al archivo nuxt.config.ts y cambiaremos su contenido por lo siguiente:

 //
 exportar definido por defectoNuxtConfig({
  herramientas de desarrollo: {habilitado: verdadero},
  módulos: ("@nuxtjs/tailwindcss"),
 });

A continuación, iniciaremos Tailwind CSS ejecutando `npx tailwindcss init`

Cree el archivo Main.CSS

Después de hacer esto también, crearemos dos carpetas nuevas y un nuevo archivo main.css y colocaremos el siguiente código en él:

 @base de viento de cola;
 @tailwindcomponents;
 @tailwind utilidades;

Y esta es la ruta de nuestro archivo main.css recién creado: ./assets/css/main.css

Ahora, si ejecutamos la aplicación mediante hilo o npm run dev, podemos intentar probar si nuestra instalación fue exitosa o no.

Pruebe la instalación de Nuxt Tailwind

Para probarlo, podemos acceder al archivo app.vue y reemplazar su contenido por lo siguiente:

 <plantilla>
  <h1>
    ¡Hola Mundo!
  </h1>
 </plantilla>

Ahora, si se aplican las reglas CSS de Tailwind, deberíamos ver esta pantalla:

Construyendo el proyecto: un blog llamado Jingles

La mejor manera de aprender es practicando. Ahora que sabemos qué es Nuxt.js, qué es Tailwind CSS y hemos configurado y ejecutado nuestra aplicación, es hora de crear algo para que el conocimiento permanezca con nosotros. Ahora, antes de comenzar, si nunca antes ha usado CSS en JS como Tailwind CSS, la forma en que aborda el estilo puede parecer confusa, incluso desalentadora al principio. Aquí es importante recordar que sólo avanzamos cuando nos encontramos en una situación desconocida. Entonces, después de este tutorial, Tailwind CSS debería tener sentido para nosotros y deberíamos poder usarlo en nuestros proyectos.

Una última cosa antes de comenzar, recuerde que cuando aprendamos un marco CSS como Tailwind CSS, haremos un uso intensivo de la documentación oficial. No intentamos memorizar nada porque no es necesario. Los documentos oficiales son muy buenos y podemos buscar fácilmente lo que queramos.

Comencemos construyendo la barra de navegación para nuestra aplicación. Tenga en cuenta que, por razones heurísticas, esta aplicación no responderá a dispositivos móviles. Centrémonos únicamente en la versión de escritorio.

Construyendo la barra de navegación

Lo primero es lo primero: crearemos una carpeta de componentes y colocaremos un archivo navbar.vue dentro de ella. Entonces, en nuestro archivo app.vue, lo importaremos así:

 <plantilla>
  <barra de navegación />
 </plantilla>

 <guión>
 importar barra de navegación desde "./components/navbar.vue";
 </script>

Ahora podemos volver a navbar.vue y comenzar a escribir código. En la sección de plantillas, usaremos flexbox para lograr el resultado deseado.

Agreguemos el siguiente div:

 <div></div>

En este div, estamos haciendo lo siguiente:

-pantalla flexible

-justificar el contenido al espacio entre ellos para que los elementos dentro de él estén espaciados en lados opuestos del div

-alinear elementos al centro

-hacer la pantalla de ancho completo

-dar un color de fondo de #d60068

-dar un relleno de 5px en todos los lados

Mira, así es como escribimos CSS a través de Tailwind CSS. Si ya usa Vue.js, sabrá que Vue.js viene con su propia sección de estilo donde el desarrollador puede escribir CSS directamente en el componente. En CSS en JS, no damos nombres de clase a elementos como divs, sino que escribimos las clases CSS deseadas directamente dentro de ese elemento como un nombre de clase. Aquí, al escribir flex y justify-center, le estamos diciendo a Tailwind CSS que aplique las clases display:flex y justify-content:center a este div. ¿Cómo sabemos cómo implementar la clase CSS Tailwind y para qué clase CSS? Simplemente refiriéndose a documentos oficiales.

Ahora hay muchas clases allí, como siempre. Al desarrollar o leer código, no necesitamos buscar el nombre de clase del elemento y luego buscar la etiqueta de clase correspondiente al nombre de clase y leer el CSS desde allí. En cambio, podemos leerlo directamente desde el propio elemento. Esa es la belleza de CSS en JS.

Queremos agregar cuatro elementos dentro de esta barra de navegación, uno de ellos alineado a la izquierda y tres a la derecha. Usaremos flexbox nuevamente y crearemos dos divs. El primer div contendrá el elemento de la izquierda, y el segundo div tendrá tres elementos más dentro de él, que se alinearán a la derecha con algo de espacio entre ellos. Como puede ver, estamos superponiendo nuestro plan visual en cuadros flexibles. Ahora, dentro del div anterior, agregamos el siguiente fragmento:

  <div>Jingles</div>
      <div>
        <enlace-enrutador a="
        <router-link to="/about">Acerca de</router-link> 
<enlace del enrutador a="/contacto"
 >Contacto</router-link
 >
 </div>
 </div>

Lo que estamos haciendo aquí es que, con el primer div, que es el elemento alineado a la izquierda que contiene el texto Jingles, le damos un tamaño de texto xl y un peso de fuente en negrita.

A continuación, estamos creando otro contenedor div, que contendrá los tres elementos de la derecha. En este div contenedor, nuevamente iniciamos flexbox escribiendo flex, justificando los elementos circundantes para que tengan algo de espacio entre ellos y dándole un ancho de 5/12 del div contenedor.

Dentro de él, tenemos tres elementos de enlace de enrutador que aún no hemos creado, pero que nos llevarán a sus respectivos puntos finales una vez que los creemos, y simplemente le daremos algunos estilos al último, dándole un color de fondo negro y un texto blanco. color, un relleno de 2px en todos los lados y un radio de borde de 2xl (mucho).

Y es eso. Hemos creado con éxito la barra de navegación de nuestra aplicación. Ahora, creemos la sección de héroe.

Construyendo la sección de héroes

Ahora, como hicimos con la barra de navegación, creemos un archivo hero.vue dentro de la carpeta de componentes e importemoslo a nuestro archivo app.vue.

 <plantilla>
  <barra de navegación />
  <héroe/>
 </plantilla>

 <guión>
 importar barra de navegación desde "./components/navbar.vue";
 importar héroe desde "./components/hero.vue";
 </script>

Entonces iremos al archivo hero.vue y comenzaremos a escribir el código. Aquí queremos tener tres elementos uno encima del otro y, dado que este es el comportamiento predeterminado del navegador, no necesitamos usar flexbox aquí. Veamos el siguiente extracto:

 <plantilla>
  <

  >
    <div>Quédate con hambre</div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae,
      accusantium eos dolores quer porro doloremque culpa reprehenderit 
fugiat modi commodi numquam exercitationem id voluptas tempora. Y el
 enfermedades menos velocidad máxima.
 </div>
 <div>
 <botón>Empezar a leer</botón>
 </div>
 </div>
 </plantilla>

¿Lo que está sucediendo aquí? Primero, en el contenedor div, proporcionamos una altura completa con el comando h-full. Esto completo no significa pantalla completa, si quisiéramos que ocupara toda la pantalla diríamos pantalla h, en lugar de eso decimos que debe contener los elementos dentro de ella y expandirse en consecuencia. Entonces tenemos w-full, honestamente, aquí también podríamos decir w-screen y eso no cambiaría nada.

Como hicimos antes, le damos el color de fondo con el comando bg. Luego tenemos los comandos py-5 y pl-10. Están relacionados con el acolchado. El primero significa dar un relleno de 5px desde el eje y, es decir, desde arriba y desde abajo. Y el segundo dice que le demos un relleno de 10px desde la izquierda. Luego le damos un color de texto negro y un borde negro con un ancho de 1px. Mira, parece confuso al principio. Pero cuanto más escribes Tailwind CSS, más estas clases se te quedan en la mente y más rápido y productivo te vuelves.

Dentro de este div, tenemos tres elementos: un título, un cuerpo de texto que es lorem ipsum y un botón que dice empezar a leer. Para el título, le damos un texto de 7 xl y un margen inferior de 5 px con el comando mb-5. Hacemos algo similar con el texto lorem, pero le damos un tamaño de fuente 2xl. El botón tiene un fondo negro, texto blanco, un relleno de 2 píxeles en todos los lados y es redondeado.

Y es eso. Hemos creado con éxito la sección de héroe de nuestra aplicación. Ahora, creemos algunos artículos para nuestra aplicación.

Construyendo la sección de artículos

Queremos agregar al menos cuatro artículos a nuestra aplicación. Para esto usaremos accesorios porque no queremos escribir todo a mano. Como dicen en el desarrollo de software, una regla general es el código SECO (no te repitas).

Ahora creemos un nuevo archivo Article.vue en la carpeta de componentes y agreguemos este fragmento dentro de él:

 <!-- componentes/artículo.vue -->
 <plantilla>
  <div>
    <div>
      <h2 > {{ title }} </h2>
      <p> {{ content }} </p>
    </div>
  </div>
 </plantilla>

 <guión>
  exportar predeterminado {
    accesorios: {
      título: {
        tipo: cadena,
        requerido: verdadero,
      },
      contenido: {
        tipo: cadena, 
requerido: verdadero,
 },
 },
 };
 </script>

 <estilo></estilo>

Aquí estamos creando la plantilla para los artículos que mostraremos. Ahora ya sabes que m significa margen y p significa relleno, para el fondo escribimos bg y al escribir texto-xl le estamos dando al texto un tamaño de fuente más grande. Pero también estamos haciendo algo más, algo que no hemos hecho antes, estamos haciendo uso de la sección de scripts, que trata con la lógica de JavaScript.

Aquí lo que estamos usando se llama API de opciones en la terminología de Vue.js. También hay una API de composición más nueva, pero nos quedaremos con la antigua y conocida API de opciones para este tutorial. Si es un desarrollador de React y desea cambiar a Vue.js, la API de composición podría ser más adecuada para usted, pero si es un principiante, la API de opciones también es sólida.

Estamos definiendo props, en props tenemos título y contenido. Proporcionamos sus tipos y si son obligatorios o no. Y dentro de nuestra sección de plantillas, utilizamos la "sintaxis del bigote" para mostrar el título y el contenido del artículo. La sintaxis del bigote son las llaves dobles que ves en la sección de plantilla. Se utiliza para mostrar datos de la sección del script.

Ahora, importemos este componente a nuestro archivo app.vue y usémoslo para mostrar algunos artículos.

 <plantilla>
  <barra de navegación />
  <héroe/>
  <div>
    <

      v-for="(artículo, índice) en artículos"
      :clave="índice"
    >
      <artículo :título="artículo.título" :content="artículo.content" />
    </div>
  </div>
 </plantilla>

 <guión>
  importar artículo desde "~/components/article.vue";
  importar barra de navegación desde "./components/navbar.vue";
  importar héroe desde "./components/hero.vue";
  exportar predeterminado {
    componentes: {
      artículo, 
barra de navegación,
 héroe,
 },
 fecha {
 devolver {
 artículos: (
 {
 identificación: 1,
 título: "Artículo 1",
 contenido: "Contenido del artículo 1...",
 },
 {
 identificación: 2,
 título: "Artículo 2",
 contenido: "Contenido del artículo 2...",
 },

 {
 identificación: 3,
 título: "Artículo 3",
 contenido: "Contenido del artículo 3...",
 },

 {
 identificación: 4,
 título: "Artículo 4",
 contenido: "Contenido del artículo 4...",
 },
 ),
 };
 },
 };
 </script>

Como puede ver, agregamos muchas cosas aquí. Hasta ahora, importar y utilizar componentes no es ningún secreto para nosotros. Además de nuestro flujo de trabajo general, tenemos el método de datos en la API de opciones, este método de datos maneja los datos del componente. Y lo hacemos creando una serie de objetos llamados artículos y agregando las cosas necesarias que queremos dentro de ellos. Tenemos el id, título y contenido. Quizás recuerde que en nuestro archivo Article.vue usábamos el título y el contenido con fines de visualización.

Ahora en la sección de plantilla, en el componente héroe, tenemos dos divs y el componente Artículo que hemos importado. La razón por la que estamos creando dos divs es que queremos usar flexbox y en lugar de alinear los artículos uno encima del otro, queremos alinearlos uno al lado del otro, iniciando así flexbox en el primer div del contenedor.

Entonces, dentro de este div, tenemos otro div que tiene las etiquetas de clase borde, color del borde y ancho completo. En Tailwind CSS, si queremos agregar un borde a un elemento, primero debemos comenzar el borde proporcionando la palabra clave border, seguida del estilo que queremos que tenga el borde.

Después de eso, tenemos una palabra clave v-for, que es la forma específica de Vue.js de recorrer elementos. Como puede ver, toma las propiedades de artículo e índice en la matriz de objetos de artículos, proporciona el índice como clave mediante el comando :key=”index” y para cada elemento dentro de la matriz de objetos de artículos, crea un nuevo componente de artículo. . . Aquí también, para pasar los accesorios, necesitamos configurar :title=”article.title” y el contenido de la misma manera. Ahora nuestra aplicación debería verse así:

Conclusión

Para concluir nuestro tutorial de Nuxt y Tailwind, esta combinación proporciona claramente una solución eficiente y elegante para el diseño web. En proyectos que requieren alto rendimiento, diseños simplificados y capacidades SSR, una aplicación Nuxt realmente brilla como una solución ejemplar. Sin embargo, para sitios muy simples o sitios sin un enfoque en contenido dinámico, esto puede resultar excesivo.

Aunque tanto Nuxt como Tailwind vienen con una curva de aprendizaje, es una inversión que vale la pena. La modularidad de Tailwind permite a los usuarios ampliar su funcionalidad con complementos, y la flexibilidad de Nuxt ofrece amplias oportunidades para documentar y personalizar soluciones web con precisión.

Teniendo en cuenta el cambio de la industria hacia arquitecturas basadas en componentes, muchas empresas ahora subcontratan el desarrollo de Vue. Con la popularidad de nuevos marcos como Vue y el diseño que prioriza la utilidad, existe un argumento convincente de que estas herramientas seguirán siendo importantes en los tiempos venideros. Al adoptarlos hoy, se posiciona a la vanguardia, preparado para dar forma a la próxima ola de innovación web.

Si le gustó esto, asegúrese de consultar nuestros otros artículos sobre desarrollo web.

• ¿Una mejor alternativa PHP para proyectos web?
• La aplicación web progresiva: cómo están evolucionando las PWA
• Python para desarrollo web
• Cómo proteger las implementaciones de WordPress sin agotar el presupuesto de su empresa
• Representación del lado del servidor versus representación del lado del cliente: una guía para el desarrollo web

Preguntas frecuentes

¿Cuáles son los principales beneficios de integrar Tailwind CSS con una aplicación Nuxt?

La integración de Tailwind CSS con una aplicación Nuxt le permite aprovechar un estilo optimizado y centrado en las utilidades, ciclos de desarrollo más rápidos y una coherencia de diseño mejorada. Y, con desarrolladores expertos de Vue a bordo, pueden optimizar los beneficios del renderizado del lado del servidor de Nuxt para lograr un rendimiento de clase mundial.

¿Cómo mejora SSR (Server-Side Rendering) en Nuxt el rendimiento web cuando se combina con el enfoque de diseño de Tailwind que prioriza la utilidad?

Cuando Nuxt hace su magia SSR, las páginas aparecen súper rápido y están optimizadas para SEO. ¿Pero sabías que, si bien React SSR ofrece un beneficio similar, el diseño utilitario de Tailwind hace que el estilo sea más fácil? Entonces, combinar la carga rápida de Nuxt con Tailwind significa que su sitio web no solo se ve elegante sino que también funciona como un campeón. ¡Es como obtener lo mejor de ambos mundos!

¿Puedo usar componentes de Vue existentes en una aplicación de Nuxt con Tailwind y hay alguna consideración especial para el estilo?

Sí, puede utilizar componentes de Vue existentes, incluidos los de marcos de interfaz de usuario y bibliotecas de componentes, en una aplicación Nuxt con Tailwind. Sin embargo, asegúrese de que las clases de utilidad de Tailwind no entren en conflicto con los estilos de componentes existentes y sea coherente al aplicar su enfoque de diseño.