No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
21H
55M
24S
Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Extracci贸n de componentes a clases para nuestra card

16/29
Recursos

Aportes 15

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥溾搘atch鈥 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 鈥渕谩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 鈥渕in-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
}