Distinguir entre “componentes” y “utilidades” en Tailwind

Este es un consejo muy rápido. puedes pensar en Utilidades de viento de cola como componente, porque realmente puedes hacer un card “Componente” en la utilidad Tailwind.

@utility card {
  border: 1px solid black;
  padding: 1rlh;
}

<div class="card"> ... </div>

Esto desdibuja la línea entre “componente” y “utilidad”, por lo que necesitamos definir mejor estos términos.

El gran cisma… y la gran unificación

Los desarrolladores de CSS suelen definir componentes y utilidades como esta:

1. Elemento = un conjunto de estilos
2. Utilidades = regla única

Este pensamiento de grupo se genera a partir de términos que hemos recopilado a lo largo de los años. Desafortunadamente, en realidad no son los términos correctos.

Así que demos un paso atrás y consideremos el significado real detrás de estas palabras.

Elemento Significado: una cosa es parte de un todo mayor.

Utilidades Significado: útil.

entonces…

• Las utilidades son componentes Porque siguen siendo parte de un todo mayor.
• Los componentes son utilidades. Porque son útiles.

La división entre componentes y utilidades es en realidad más bien un esfuerzo de marketing destinado a vender estos marcos de utilidades, nada más.

él. real. No importa.

¿Desacuerdo significativo?

Quizás la única diferencia significativa entre componentes y utilidades (en la forma en que generalmente se definen hasta ahora) es que a menudo queremos anular los estilos de los componentes.

Se mapea algo así:

• Elemento: grupo de estilo
• Utilidades: Estilos utilizados para anular los estilos de los componentes.

Personalmente, creo que esta es una forma muy limitada de definir lo que realmente significa “útil”.

Simplemente anula el maldito estilo

Tailwind nos proporciona una característica increíble que nos permite anular los estilos de componentes. Para utilizar esta función debes:

• Escribe el estilo de tu componente components capa.
• Anule los estilos mediante la utilidad Tailwind.

@layer components {
  .card {
    border: 1px solid black;
    padding: 1rlh;
  }
}

<div class="card border-blue-500"> ... </div>

Pero esta es una forma aburrida de hacer las cosas. escritura de imaginación @layer components en todos los archivos componentes. Hay dos problemas con esto:

1. No podrá utilizar la utilidad Tailwind como componente
2. Tienes que dejar tus archivos en un lío. @layer component Declaración: se trata de una sangría adicional que hace que todo el CSS sea más difícil de leer.

Hay una mejor manera de hacer esto: podemos Cambiando la forma en que usamos las capas CSS Escribiendo utilidades como componentes.

@utility card {
  padding: 1rlh; 
  border: 1px solid black;
}

Luego podemos anular el estilo usando otra utilidad. a favor del viento !important modificador Directamente en HTML:

<div class="card !border-blue-500"> ... </div>

lo armé un ejemplo En el patio de juegos a favor del viento.

Viento de cola poco ortodoxo

Este artículo proviene directamente de mi curso, Viento de cola poco ortodoxoaprenderá a utilizar CSS y Tailwind de forma colaborativa. Si te gustó esto, hay más ahí: formas prácticas de pensar y usar Tailwind + CSS que no encontrarás en tutoriales o documentación.