Verwenden von CSS-Kaskadenebenen zum Verwalten benutzerdefinierter Stile in einem Tailwind-Projekt

Wenn eine Utility-Klasse nur eine Sache tut, möchten Sie wahrscheinlich nicht, dass sie von anderen Stilen überschrieben wird. Ein Ansatz ist die Verwendung !important um 100 % sicher zu sein, dass der Stil angewendet wird, unabhängig von Spezifitätskonflikten.

Die Tailwind-Konfigurationsdatei hat eine !important Option, die automatisch hinzugefügt wird !important zu jeder Gebrauchsklasse. Es ist nichts falsch mit der Verwendung !important auf diese Weise, aber heutzutage gibt es bessere Möglichkeiten, mit Spezifität umzugehen. Verwenden CSS-Kaskadenebenen wir können den schwerfälligen Ansatz der Verwendung vermeiden !important.

Kaskadenebenen ermöglichen es uns, Stile in „Ebenen“ zu gruppieren. Der Vorrang einer Schicht übertrifft immer die Spezifität eines Selektors. Spezifität spielt nur innerhalb jeder Schicht eine Rolle. Durch die Einrichtung einer vernünftigen Ebenenreihenfolge können Stilkonflikte und Spezifitätskriege vermieden werden. Das macht CSS Cascade Layers zu einem großartigen Werkzeug dafür Verwalten von benutzerdefinierten Stilen neben Stilen von Frameworks von Drittanbietern, wie Rückenwind.

Eine Rückenwindquelle .css Datei beginnt normalerweise so:

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

Werfen wir einen Blick auf die offizielle Tailwind-Dokumentation über Richtlinien:

Direktiven sind benutzerdefinierte Tailwind-spezifische at-Regeln, die Sie in Ihrem CSS verwenden können und die spezielle Funktionen für Tailwind-CSS-Projekte bieten. Verwenden Sie die @tailwind Direktive zum Einfügen von Tailwind's base, components, utilities und variants Stile in Ihr CSS.

In der Ausgabe-CSS-Datei, die erstellt wird, wird der CSS-Reset von Tailwind – bekannt als Preflight — ist zuerst als Teil der Basisstile enthalten. Der Rest von base besteht aus CSS-Variablen, die für das Funktionieren von Tailwind erforderlich sind. components ist ein Ort, an dem Sie Ihre eigenen benutzerdefinierten Klassen hinzufügen können. Als Nächstes werden alle Hilfsklassen angezeigt, die Sie in Ihrem Markup verwendet haben. Varianten sind Stile für Dinge wie Schwebe- und Fokuszustände und responsive Stile, die zuletzt in der generierten CSS-Datei erscheinen.

Der Rückenwind @layer Richtlinien

Verwirrenderweise hat Tailwind seine eigene @layer Syntax. In diesem Artikel geht es um den CSS-Standard, aber werfen wir einen kurzen Blick auf die Tailwind-Version (die wegkompiliert wird und nicht im Ausgabe-CSS landet). Der Rückenwind @layer Direktive ist eine Möglichkeit, Ihre eigenen zusätzlichen Stile in einen bestimmten Teil der Ausgabe-CSS-Datei einzufügen.

Zum Beispiel, um Ihre eigenen Stile an die anzuhängen base Stile, würden Sie Folgendes tun:

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

Das components Ebene ist standardmäßig leer – es ist nur ein Ort, an dem Sie Ihre eigenen Klassen platzieren können. Wenn Sie die Dinge auf die Tailwind-Art tun würden, würden Sie wahrscheinlich verwenden @apply (obwohl der Schöpfer von Tailwind kürzlich davon abgeraten), aber Sie können Klassen auch ganz normal schreiben:

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

Der CSS-Standard ist viel leistungsfähiger. Kommen wir darauf zurück…

Verwendung des CSS-Standards @layer

So können wir dies umschreiben, um den CSS-Standard zu verwenden @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Im Gegensatz zur Tailwind-Direktive werden diese nicht wegkompiliert. Sie werden vom Browser verstanden. DevTools in Edge, Chrome, Safari und Firefox zeigen Ihnen sogar alle Ebenen, die Sie definiert haben.

Sie können so viele Ebenen haben, wie Sie möchten – und sie beliebig benennen – aber in diesem Beispiel befinden sich alle meine benutzerdefinierten Stile in einer einzigen Ebene (my-custom-styles). Die erste Zeile legt die Ebenenreihenfolge fest:

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

Dies muss im Voraus bereitgestellt werden. Stellen Sie sicher, dass Sie diese Zeile vor jedem anderen Code einfügen, der verwendet wird @layer. Die erste Ebene in der Liste ist die am wenigsten mächtig, und die letzte Ebene in der Liste wird die sein vor allem warme mächtig. Das bedeutet tailwind-base lernen muss die am wenigsten mächtig Ebene und jeglicher Code darin werden von allen nachfolgenden Ebenen überschrieben. Das bedeutet auch tailwind-utilities wird immer alle anderen Stile übertrumpfen — unabhängig von der Reihenfolge oder Spezifität der Quelle. (Dienstprogramme und Varianten könnte Gehen Sie in separate Schichten, aber die Betreuer von Tailwind werden sicherstellen, dass Varianten immer die Dienstprogramme übertrumpfen, solange Sie die Varianten unterhalb der Dienstprogrammdirektive einschließen.)

Alles, was sich nicht in einer Ebene befindet, überschreibt alles, was sich in einer Ebene befindet (mit Ausnahme von Stilen, die !important). Sie könnten sich also auch dafür entscheiden, zu gehen utilities und variants außerhalb jeder Schicht:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Was hat uns das eigentlich gekauft? Es gibt viele Fälle, in denen fortgeschrittene CSS-Selektoren ziemlich praktisch sind. Lassen Sie uns eine Version von erstellen :focus-within das nur auf den Tastaturfokus reagiert und nicht auf Mausklicks mit dem :has Selektor (die in Chrome 105 landet). Dadurch wird ein übergeordnetes Element formatiert, wenn eines seiner untergeordneten Elemente den Fokus erhält. Rückenwind 3.1 eingeführt benutzerdefinierte Varianten - z.B <div class="[&:has(:focus-visible)]:outline-red-600"> — aber manchmal ist es einfacher, nur CSS zu schreiben:

@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;
  }
}

Nehmen wir an, in nur einem Fall möchten wir die überschreiben outline-color für blue zu etwas anderem. Nehmen wir an, das Element, mit dem wir arbeiten, hat sowohl die Tailwind-Klasse .outline-red-600 und unsere eigenen .radio-container:has(:focus-visible) Klasse:

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

Welche outline-color wird gewinnen?

Normalerweise ist die höhere Spezifität von .radio-container:has(:focus-visible) würde bedeuten, dass die Tailwind-Klasse keine Auswirkung hat – selbst wenn sie in der Quellreihenfolge niedriger ist. Aber im Gegensatz zum Rückenwind @layer Direktive, die auf der Quellreihenfolge, dem CSS-Standard, beruht @layer setzt die Spezifität außer Kraft.

Infolgedessen können wir komplexe Selektoren in unseren eigenen benutzerdefinierten Stilen verwenden, sie aber dennoch bei Bedarf mit den Utility-Klassen von Tailwind überschreiben – ohne auf schwerfällige Methoden zurückgreifen zu müssen !important verwenden, um zu bekommen, was wir wollen.