Utilisation des couches CSS Cascade pour gérer les styles personnalisés dans un projet Tailwind

Si une classe utilitaire ne fait qu'une chose, il y a de fortes chances que vous ne vouliez pas qu'elle soit remplacée par des styles venant d'ailleurs. Une approche consiste à utiliser !important pour être sûr à 100 % que le style sera appliqué, quels que soient les conflits de spécificité.

Le fichier de configuration Tailwind a un !important option qui ajoutera automatiquement !important à chaque classe d'utilité. Il n'y a rien de mal à utiliser !important de cette façon, mais de nos jours, il existe de meilleures façons de gérer la spécificité. Utilisant Couches en cascade CSS nous pouvons éviter l'approche lourde de l'utilisation !important.

Les calques en cascade nous permettent de regrouper les styles en « calques ». La priorité d'une couche bat toujours la spécificité d'un sélecteur. La spécificité n'a d'importance qu'à l'intérieur de chaque couche. L'établissement d'un ordre de calque sensé permet d'éviter les conflits de style et les guerres de spécificité. C'est ce qui fait de CSS Cascade Layers un excellent outil pour gestion des styles personnalisés aux côtés des styles de frameworks tiers, comme Tailwind.

Une source Tailwind .css file commence généralement quelque chose comme ceci :

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

Jetons un coup d'oeil au documentations officielles de Tailwind à propos des instructions :

Les directives sont des règles spécifiques spécifiques à Tailwind que vous pouvez utiliser dans votre CSS et qui offrent des fonctionnalités spéciales pour les projets CSS Tailwind. Utilisez le @tailwind directive pour insérer Tailwind base, components, utilities ainsi que variants styles dans votre CSS.

Dans le fichier CSS de sortie généré, la réinitialisation CSS de Tailwind, appelée Preflight — est inclus en premier dans les styles de base. Le reste de base se compose de variables CSS nécessaires au fonctionnement de Tailwind. components est un endroit où vous pouvez ajouter vos propres classes personnalisées. Toutes les classes utilitaires que vous avez utilisées dans votre balisage apparaîtront ensuite. Les variantes sont des styles pour des choses comme les états de survol et de focus et les styles réactifs, qui apparaîtront en dernier dans le fichier CSS généré.

Le vent arrière @layer directive

Confusément, Tailwind a son propre @layer syntaxe. Cet article concerne la norme CSS, mais jetons un coup d'œil à la version Tailwind (qui est compilée et ne se retrouve pas dans le CSS de sortie). Le vent arrière @layer est un moyen d'injecter vos propres styles supplémentaires dans une partie spécifiée du fichier CSS de sortie.

Par exemple, pour ajouter vos propres styles au base styles, vous feriez ce qui suit :

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

Les components La couche est vide par défaut - c'est juste un endroit pour mettre vos propres classes. Si vous faisiez les choses à la manière de Tailwind, vous utiliseriez probablement @apply (bien que le créateur de Tailwind ait récemment déconseillé), mais vous pouvez également écrire des classes de la manière habituelle :

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

La norme CSS est beaucoup plus puissante. Revenons à cela…

Utilisation de la norme CSS @layer

Voici comment nous pouvons réécrire ceci pour utiliser la norme CSS @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Contrairement à la directive Tailwind, celles-ci ne sont pas compilées. Ils sont compris par le navigateur. En fait, DevTools dans Edge, Chrome, Safari et Firefox vous montrera même toutes les couches que vous avez définies.

Vous pouvez avoir autant de calques que vous le souhaitez - et les nommer comme vous le souhaitez - mais dans cet exemple, tous mes styles personnalisés sont dans un seul calque (my-custom-styles). La première ligne établit l'ordre des calques :

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

Cela doit être fourni à l'avance. Assurez-vous d'inclure cette ligne avant tout autre code utilisant @layer. La première couche de la liste sera la au puissant, et la dernière couche de la liste sera la (en fait, presque toutes) puissant. Cela signifie tailwind-base est le moins puissant couche et tout code qu'elle contient sera remplacé par toutes les couches suivantes. Cela signifie aussi tailwind-utilities l'emportera toujours sur tous les autres styles - quel que soit l'ordre ou la spécificité de la source. (Utilitaires et variantes pourriez allez dans des couches séparées, mais les responsables de Tailwind s'assureront que les variantes l'emportent toujours sur les utilitaires, tant que vous incluez les variantes sous la directive sur les utilitaires.)

Tout ce qui n'est pas dans un calque remplacera tout ce qui est dans un calque (à l'exception des styles qui utilisent !important). Ainsi, vous pouvez également choisir de partir utilities ainsi que variants en dehors de toute couche :

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Qu'est-ce que cela nous a réellement acheté? Il y a de nombreuses fois où les sélecteurs CSS avancés sont très pratiques. Créons une version de :focus-within qui ne répond qu'au focus du clavier plutôt qu'aux clics de souris en utilisant le :has sélecteur (qui atterrit dans Chrome 105). Cela stylisera un élément parent lorsque l'un de ses enfants recevra le focus. Tailwind 3.1 introduit variantes personnalisées - par exemple <div class="[&:has(:focus-visible)]:outline-red-600"> — mais parfois il est plus simple d'écrire du 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;
  }
}

Disons que dans un seul cas, nous voulons remplacer le outline-color de blue à autre chose. Disons que l'élément avec lequel nous travaillons a à la fois la classe Tailwind .outline-red-600 et la nôtre .radio-container:has(:focus-visible) classe:

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

Laquelle outline-color gagneront?

Normalement, la plus grande spécificité de .radio-container:has(:focus-visible) signifierait que la classe Tailwind n'a aucun effet, même si elle est inférieure dans l'ordre des sources. Mais, contrairement au Tailwind @layer directive qui repose sur l'ordre des sources, la norme CSS @layer prévaut sur la spécificité.

En conséquence, nous pouvons utiliser des sélecteurs complexes dans nos propres styles personnalisés, mais toujours les remplacer par les classes utilitaires de Tailwind lorsque nous en avons besoin - sans avoir à recourir à la main lourde !important utilisation pour obtenir ce que nous voulons.