A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

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 4

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

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?

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: