Extracción de componentes a clases para nuestra card

La extracción de componentes sirve para no escribir el mismo código en componentes que se utilizarán más de una vez (ej. cards) y poder mantener el principio de utility-first. La extracción de componentes trabaja de la mano con la directiva **@apply**.

Para hacer la extracción de componentes se procede a lo siguiente:

En el archivo src/css/tailwind.css se crean clases cuyo nombre será el adecuado para identificar cierto componente, dentro de la clase se introducirán todos los estilos de Tailwind que se estarán reutilizando haciendo el uso de la directiva @apply seguido de las clases de Tailwind.

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

.Card {
    @apply w-48 h-64 shadow-md rounded-lg
}

Haciendo lo anterior se puede utilizar el nombre de la nueva clase en nuestro archivo HTML, es importante ejecutar el script tw:build para que se efectúen los cambios.

Archivo index.html:

<div class="Card">
	<div class="w-full h-3/5 rounded-t-lg bg-norway bg-cover"></div>
	<div class="w-full h-2/5 bg-secondary rounded-b-lg">
			<p class="text-white font-bold text-xl px-4 py-2">Norway</p>
			<p class="text-white px-4">Paisajes Increíbles</p>
	</div>
</div>

Cabe mencionar que se deben identificar los componentes que se utilizarán más de una vez en el proyecto ya que Tailwind no está diseñado para trabajar todas nuestras clases de esta manera. Tal como lo menciona la documentación:

Si comienzas a usar @apply para todo, básicamente solo estás escribiendo CSS nuevamente y desechando todas las ventajas del flujo de trabajo y mantenimiento que brinda Tailwind, por ejemplo:

• Tienes que pensar en los nombres de las clases todo el tiempo → Nada te quitará la energía como pensar en el nombre de una clase para algo que no merece ser nombrado.
• Tienes que saltar entre varios archivos para hacer cambios. Esto es un asesino del flujo de trabajo mucho más grande de lo que piensas antes de ubicar todo junto.
• Cambiar estilos da más miedo. CSS es global, ¿está seguro de que puedes cambiar el valor de min-width en esa clase sin romper algo en otra parte del sitio?
• El bundle de CSS será más grande. Uuf.

Si va a usar @apply, úsalo para cosas muy pequeñas y altamente reutilizables, como botones y formularios, e incluso, solo si no estás usando un framework como React, donde un componente sería una mejor opción.

–

Documentación de la extracción de componentes en Tailwind: https://tailwindcss.com/docs/reusing-styles#extracting-components-and-partials

Se puede utitlizar la bandera “–watch” para que quede siempre haciendo el build mientras se va desarrollando.

npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch

Según la documentación de Tailwind 3, en la sección de Funciones y directivas, debemos agregar estas nuevas clases no como clases directas de CSS, sino extendiendo la capa de componentes de Tailwind con la directiva @layer:

@layer components {
  .card {
    @apply w-48 h-64 shadow-md rounded-lg;
  }
}

Me parece que en las clases de instalación se comentó que se usaría como plugin de PostCSS pero se esta usando como vanilla 🤔
Usándolo como plugin de PostCSS se puede usar nesting para hacer mas fáciles las clases, como en este caso:

Que con una sola clase card también le doy estilo al contenido, y el HTM,L quedaría mas libre de esta forma:

Y queda igual:

Existen dos tipos de personas.

1. Los que ponen todo junto hasta con las llaves

.Card{
}

1. Los que ponen espacio a cada cosa:

.Card {
}

Pueden utilizar las directivas de CSS y Tailwind para solo poner el nombre de una clase en el div principal y automáticamente tome los demás cambios:

En el archivo src/css/talwind.css:

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

@layer components {
  .card {
    @apply w-48 h-64 shadow-md rounded-lg;
  }
  .card > div:first-child {
    @apply w-full h-3/5 rounded-t-lg bg-cover;
  }
  .card > div:nth-child(2) {
    @apply w-full h-2/5 bg-secondary rounded-b-lg;
  }
  .card > div:nth-child(2) > p:first-child {
    @apply text-white font-bold text-lg px-4 pt-2;
  }
  .card > div:nth-child(2) > p:nth-child(2) {
    @apply text-white text-base px-4;
  }
}
 

Y se usa así en el html:

 <div class="card">
      <div class="bg-norway"></div>
         <div>
              <p>Noruega</p>
              <p>Paisajes hermosos</p>
         </div>
  </div>
                 	

Increíble cuan diferente es tailwind 3 de sus antecesores en la forma de usarlo. En la version 3 ya no recomienda usar @apply.
Este curso se empieza a desfasar rápido

🍃 Tailwind nos advierte del uso de @apply con los siguientes puntos.

• Tienes que pensar en nombres de clase todo el tiempo

• Tienes que saltar entre varios archivos para hacer cambios

• Cambiar estilos es más aterrador

• Tu paquete CSS será más grande

• Usa @apply solo para cosas muy pequeñas y altamente reutilizables, como botones y controles de formulario

• Solo usa @apply si no estás utilizando un marco de trabajo como React donde un componente sería una mejor opción.

Esta información la saqué de la documentación oficial. https://tailwindcss.com/docs/reusing-styles

Para poder usar la extracción de componentes a clases, para las demás partes de las cards se me ocurre que podemos hacer esto:

Funciona. Pero que opinan al respecto?

Se ve poderoso, pero como dicen, sería como regresar a css xd

Esta funcionalidad está brutal!

Evita abstracciones prematuras 🔥🤔

Hagas lo que hagas, no uses “@apply” solo para que las cosas se vean “más limpias”. Sí, las plantillas HTML llenas de clases de Tailwind son un poco feas. Hacer cambios en un proyecto que tiene toneladas de CSS personalizado es peor.
.
Si comienzas a usar “@apply” para todo, básicamente estarás escribiendo CSS de nuevo y desechando todas las ventajas de flujo de trabajo y mantenimiento que te da Tailwind, por ejemplo:
.

• Tienes que pensar en nombres de clases todo el tiempo: nada te ralentizará o te agotará más que pensar en un nombre de clase para algo que no merece ser nombrado.
• Tienes que saltar entre varios archivos para hacer cambios: lo cual es un matador de flujo de trabajo mucho más grande de lo que pensarías antes de colocar todo en el mismo lugar.
• Cambiar estilos es más aterrador: CSS es global, ¿estás seguro de que puedes cambiar el valor de “min-width” en esa clase sin romper algo en otra parte del sitio?
• Tu paquete CSS será más grande: ¡ouch!

Si vas a usar “@apply”, úsalo para cosas muy pequeñas y altamente reutilizables como botones y controles de formulario, y aun así solo si no estás usando un marco como React donde un componente sería una mejor opción.

Acabo de leer en la documentacion de Tailwind 3 que no se recomienda utilizar @apply, y solamente sugiere utilizarlo para elementos altamente reutilizables como botones y en formularios.

Avoiding premature Abstraction

Si les aparece el rebuilding y el tiempo de la finalización, teclea este comando:

ctrl + c

El reto lo resolví así, me funcionó

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../public/css/tailwind.css" />
    <title>Gogo Travel</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"/>
  </head>
  <body>
      <nav></nav>
      <div id="tabBar"></div>
      <section class="w-full h-screen">
          <div id="home">
            <div class="w-full h-3/4">
              <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center">
                <input type="search" name="" id="" class="outline-none p-3 rounded-full shadow-sm" placeholder="San Francisco">
                <button class="w-36 rounded-full text-primary text-xl font-semibold p-4 bg-white shadow-sm">
                  Explorar
                </button>
              </div>
              <div class="w-full h-full">
                <img src="./img/sanFrancisco.jpg" alt="">
              </div>
            </div>
          </div>
          <div class="p-20" id="recomendadas">
            <div class="Card">
              <div class="Image bg-norway"></div>
              <div class="Info bg-secondary">
                <p class="Country">Norway</p>
                <p class="Desc">Paisajes Increíbles</p> 
              </div>
            </div>
          </div>
          <div id="rentas_destacadas"></div>
      </section>
    <footer></footer>
  </body>
</html>

.

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.Card{
    @apply w-48 h-64 shadow-md rounded-lg overflow-hidden
}

.Image{
    @apply w-full h-3/5  bg-cover rounded-t-lg
}

.Info{
    @apply w-full h-2/5  rounded-b-lg
}

.Country{
    @apply text-white font-bold text-lg px-4 py-2
}

.Desc{
    @apply text-white text-base px-4
}