Uso de capas en cascada de CSS para administrar estilos personalizados en un proyecto Tailwind

Si una clase de utilidad solo hace una cosa, es probable que no desee que se anule con ningún estilo que provenga de otro lugar. Un enfoque es usar !important para estar 100% seguro de que se aplicará el estilo, independientemente de los conflictos de especificidad.

El archivo de configuración de Tailwind tiene un !important opción que agregará automáticamente !important a cada clase de utilidad. No hay nada de malo en usar !important de esta manera, pero hoy en día hay mejores formas de manejar la especificidad. Usando Capas en cascada CSS podemos evitar el enfoque de mano dura de usar !important.

Las capas en cascada nos permiten agrupar estilos en "capas". La precedencia de una capa siempre supera la especificidad de un selector. La especificidad solo importa dentro de cada capa. Establecer un orden de capas sensato ayuda a evitar conflictos de estilo y guerras de especificidad. Eso es lo que hace que CSS Cascade Layers sea una gran herramienta para administrar estilos personalizados junto con estilos de marcos de terceros, como Tailwind.

Una fuente de viento de cola .css archivo por lo general comienza algo como esto:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Echemos un vistazo a la documentos oficiales de Tailwind sobre directivas:

Las directivas son reglas at personalizadas y específicas de Tailwind que puede usar en su CSS y que ofrecen una funcionalidad especial para los proyectos de Tailwind CSS. Utilizar el @tailwind directiva para insertar Tailwind base, components, utilities y variants estilos en su CSS.

En el archivo CSS de salida que se crea, el restablecimiento de CSS de Tailwind, conocido como Comprobación preliminar — se incluye primero como parte de los estilos base. El resto de base consta de variables CSS necesarias para que Tailwind funcione. components es un lugar para que usted agregue sus propias clases personalizadas. Cualquier clase de utilidad que haya usado en su marcado aparecerá a continuación. Las variantes son estilos para elementos como los estados de enfoque y desplazamiento y los estilos receptivos, que aparecerán en último lugar en el archivo CSS generado.

El viento de cola @layer Directivas

Confusamente, Tailwind tiene su propio @layer sintaxis. Este artículo trata sobre el estándar CSS, pero echemos un vistazo rápido a la versión Tailwind (que se compila y no termina en el CSS de salida). El viento de cola @layer La directiva es una forma de inyectar sus propios estilos adicionales en una parte específica del archivo CSS de salida.

Por ejemplo, para agregar sus propios estilos al base estilos, haría lo siguiente:

@layer base {
  h1 {
    font-size: 30px;
  }
}

El components La capa está vacía de forma predeterminada: es solo un lugar para colocar sus propias clases. Si estuviera haciendo las cosas a la manera de Tailwind, probablemente usaría @apply (aunque el creador de Tailwind recientemente desaconsejado), pero también puedes escribir clases de la forma habitual:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

El estándar CSS es mucho más poderoso. Volvamos a eso…

Usando el estándar CSS @layer

Así es como podemos reescribir esto para usar el estándar CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

A diferencia de la directiva Tailwind, estos no se compilan. Son entendidos por el navegador. De hecho, DevTools en Edge, Chrome, Safari y Firefox incluso le mostrará las capas que haya definido.

Puede tener tantas capas como desee, y nombrarlas como desee, pero en este ejemplo, todos mis estilos personalizados están en una sola capa (my-custom-styles). La primera línea establece el orden de las capas:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Esto debe proporcionarse por adelantado. Asegúrese de incluir esta línea antes de cualquier otro código que use @layer. La primera capa de la lista será la menos poderosa, y la última capa en la lista será la MEJOR DE TU poderoso. Eso significa tailwind-base son los menos poderoso capa y cualquier código en ella será anulado por todas las capas subsiguientes. Eso también significa tailwind-utilities siempre triunfará sobre cualquier otro estilo, independientemente del orden de origen o la especificidad. (Utilidades y variantes podría ir en capas separadas, pero los mantenedores de Tailwind se asegurarán de que las variantes siempre prevalezcan sobre las utilidades, siempre que incluya las variantes debajo de la directiva de utilidades).

Cualquier cosa que no esté en una capa anulará cualquier cosa que esté en una capa (con la única excepción de los estilos que usan !important). Por lo tanto, también puede optar por dejar utilities y variants fuera de cualquier capa:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

¿Qué nos compró esto realmente? Hay muchas ocasiones en las que los selectores de CSS avanzados resultan muy útiles. Vamos a crear una versión de :focus-within que solo responde al enfoque del teclado en lugar de los clics del mouse usando el :has selectorque aterriza en Chrome 105). Esto le dará estilo a un elemento principal cuando cualquiera de sus elementos secundarios reciba el foco. Tailwind 3.1 introducido variantes personalizadas - p.ej <div class="[&:has(:focus-visible)]:outline-red-600"> — pero a veces es más fácil simplemente escribir CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Digamos que en una sola instancia queremos anular el outline-color en blue a otra cosa Digamos que el elemento con el que estamos trabajando tiene la clase Tailwind .outline-red-600 y el nuestro .radio-container:has(:focus-visible) clase:

<div class="outline-red-600 radio-container"> ... </div>

Cual outline-color ¿ganará?

Por lo general, la mayor especificidad de .radio-container:has(:focus-visible) significaría que la clase Tailwind no tiene efecto, incluso si está más abajo en el orden de origen. Pero, a diferencia del Tailwind @layer directiva que se basa en el orden de origen, el estándar CSS @layer anula la especificidad.

Como resultado, podemos usar selectores complejos en nuestros propios estilos personalizados, pero anularlos con las clases de utilidad de Tailwind cuando sea necesario, sin tener que recurrir a métodos de mano dura. !important uso para obtener lo que queremos.