Cómo hacer que el @apply se pueda reescribir por otras clases de utilidad en Tailwind CSS

Una pregunta... en un escerario como este en Tailwind CSS.

Tengo una clase definida de esta manera:

h1.big {
  @apply text-4xl xs:text-5xl sm:text-6xl sm:mb-12 text-white;
}

En este @apply he definido un texto grande y, lo importante, el color del texto es blanco.

Luego tengo un elemento del HTML en el que uso la clase tal cual.

<h1 class="big">Esto tiene la clase tal cual, el texto es blanco</h1>

Pero tengo otro h1 en el que quiero usar el texto de otro color. Para ello le incorporo una nueva clase de utilidad.

<h1 class="big text-red-500">Esto tiene la clase tal cual, el texto es blanco</h1>

El caso es que el elemento sigue estando en blanco. ¿Cómo puedo hacer que esa clase de utilidad tenga preferencia sobre lo que se definió en la clase "big" con @apply?

Editar

Responder la pregunta

Gustavo

174 5 12 10

Es una buena pregunta. Aquí necesitas tener en cuenta dos cosas.

Primero saber dónde se aplica ese CSS. Porque dependiendo del lugar donde lo apliques puede estar sobreescrito o no el estilo de la clase de utilidad.

Para que las clases de utilidad tengan predominanca sobre las clases personalizadas en tus diseños, uses o no el @apply, tienes que ponerlo dentro de la directiva "@layer components".

@layer components {
  h1.big {
    @apply text-4xl xs:text-5xl sm:text-6xl sm:mb-12 text-white;
  }
}

Repasa este artículo de @layer.

Peo además tienes probablemente un problema de especificidad del CSS.

Al haber usado el selector h1.big tus estilos tendrán más especificidad que los que tengas en .text-red-500 o cualquier otra clase de utilidad.

Para asegurarte que las clases de utilidad tengan preferencia sobre tus estilos tienes que hacer selectores de clases comunes.

@layer components {
  .big {
    @apply text-4xl xs:text-5xl sm:text-6xl sm:mb-12 text-white;
  }
}

Espero que esto sí te ayude.

Camila

650 28 42 6

Cómo hacer que el @apply se pueda reescribir por otras clases de utilidad en Tailwind CSS

Respuestas