¿Alguien me puede explicar brevemente como extraer un componente? Muchas gracias!

¡Hola! :)

Imagina tener que usar un botón con todas estas reglas de estilo varias veces:

<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
  Click me
</button>

¡Son demasiadas clases! 😱

Mejor definimos la clase nueva .btn-blue y usamos

para que se incluyan todas esas reglas de estilo:

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Así, la proxima vez que querramos un botón con todos esos estilos, solo usamos una clase

.

Puedes revisar la documentación para ver más detalles sobre extracting components y este ejemplo.

¡Nunca pares de aprender! 💚