¿En qué escenario se recomienda usar @apply sobre la extracción de estilos en un componente?
¿Se puede usar @apply como reemplazo de @mixin en sass? Si no, ¿qué debo usar como reemplazo de @mixin cuando trabajo con tailwindcss?
La documentación sugiere usar @apply solo para cosas pequeñas altamente reutilizables como botones, entradas, encabezados, etc. De lo contrario, perderá las ventajas que le brinda el viento de cola.
Para cosas más grandes sugiere usar componentes, bucles, etc.
Como nota al margen, si usa @apply más de lo necesario, aumentará el tamaño del viento de cola, por lo que perderá una de las mayores ventajas que tiene el viento de cola.
Así que tienes que encontrar un equilibrio entre estos 2.
En cuanto a la mezcla. lo único que podrías hacer es lo siguiente en tu app.css -archivo de tailwind-
@layer components { .foo { @apply mb-2 text-2xl font-bold; } .bar { @apply .foo; } }En general, es mejor usar @apply cuando se aplica el mismo estilo en varios componentes.
Creo que es mejor usar @apply en sus elementos comunes, como las etiquetas h1-6 y p. También me gusta crear componentes comunes en mi aplicación como Tarjetas o Botones que usan "superficies" compartidas. Se beneficiará de crear estilos con @apply y luego hacer referencia a ellos en el nombre de clase de estos componentes, ya que es posible que desee tener estilos comunes, como color de fondo en modo oscuro/claro, opacidad de desplazamiento, tamaño receptivo, etc.
No tiene que usar @apply y no hace ninguna diferencia real en términos de rendimiento. Sin embargo, tailwindcss es un marco de utilidad, por lo que combinar utilidades en una sola clase anula el propósito de la biblioteca. Simplemente hace que su experiencia de desarrollo sea mejor si se repite.