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

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: