Używanie warstw kaskadowych CSS do zarządzania stylami niestandardowymi w projekcie Tailwind

Jeśli klasa narzędziowa robi tylko jedną rzecz, prawdopodobnie nie chcesz, aby była zastępowana przez jakiekolwiek style pochodzące z innych źródeł. Jednym podejściem jest użycie !important aby mieć 100% pewność, że styl zostanie zastosowany, niezależnie od konfliktów specyfiki.

Plik konfiguracyjny Tailwind zawiera !important opcja, która zostanie automatycznie dodana !important do każdej klasy użytkowej. Nie ma nic złego w używaniu !important w ten sposób, ale obecnie istnieją lepsze sposoby radzenia sobie ze specyficznością. Za pomocą Warstwy kaskadowe CSS możemy uniknąć ciężkiego podejścia do używania !important.

Warstwy kaskadowe pozwalają nam grupować style w „warstwy”. Pierwszeństwo warstwy zawsze przewyższa specyfikę selektora. Specyfika ma znaczenie tylko wewnątrz każdej warstwy. Ustalenie rozsądnego porządku warstw pomaga uniknąć konfliktów stylizacji i wojen o specyfikę. To właśnie sprawia, że ​​CSS Cascade Layers jest świetnym narzędziem do zarządzanie niestandardowymi stylami wraz ze stylami z zewnętrznych frameworków, jak Tailwind.

Źródło Tailwind .css plik zwykle zaczyna się mniej więcej tak:

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

Rzućmy okiem na oficjalne dokumenty Tailwind o dyrektywach:

Dyrektywy to niestandardowe reguły firmy Tailwind, których możesz używać w swoim CSS, które oferują specjalne funkcje dla projektów CSS w Tailwind. Użyj @tailwind dyrektywa do wstawiania Tailwind's base, components, utilities i variants style do swojego CSS.

W wyjściowym pliku CSS, który zostanie utworzony, reset CSS Tailwind — znany jako Inspekcja wstępna — jest dołączany jako pierwszy jako część stylów podstawowych. Reszta base składa się ze zmiennych CSS potrzebnych do działania Tailwind. components to miejsce, w którym możesz dodawać własne, niestandardowe klasy. Wszelkie klasy użytkowe, których użyłeś w swoich znacznikach, pojawią się jako następne. Warianty to style dla takich rzeczy, jak stany najechania i skupienia oraz style responsywne, które pojawią się jako ostatnie w wygenerowanym pliku CSS.

Tylny wiatr @layer Dyrektywy

Myląco, Tailwind ma swój własny @layer składnia. Ten artykuł dotyczy standardu CSS, ale rzućmy okiem na wersję Tailwind (która jest kompilowana i nie trafia do wyjściowego kodu CSS). Tylny wiatr @layer Dyrektywa jest sposobem na wstrzyknięcie własnych dodatkowych stylów do określonej części wyjściowego pliku CSS.

Na przykład, aby dodać własne style do base style, wykonaj następujące czynności:

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

Połączenia components warstwa jest domyślnie pusta — to tylko miejsce, w którym można umieścić własne klasy. Gdybyś robił rzeczy w stylu Tailwind, prawdopodobnie użyłbyś @apply (choć ostatnio twórca Tailwind) odradzało to), ale możesz też pisać klasy w zwykły sposób:

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

Standard CSS jest znacznie potężniejszy. Wróćmy do tego…

Korzystanie ze standardu CSS @layer

Oto jak możemy to przepisać, aby używać standardu CSS @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

W przeciwieństwie do dyrektywy Tailwind nie są one kompilowane. Są rozumiane przez przeglądarkę. W rzeczywistości DevTools w Edge, Chrome, Safari i Firefox pokaże Ci nawet wszystkie zdefiniowane przez Ciebie warstwy.

Możesz mieć tyle warstw, ile chcesz — i nazwij je, jak chcesz — ale w tym przykładzie wszystkie moje style niestandardowe znajdują się na jednej warstwie (my-custom-styles). Pierwsza linia określa kolejność warstw:

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

Należy to podać z góry. Pamiętaj, aby dołączyć ten wiersz przed jakimkolwiek innym kodem, który używa @layer. Pierwszą warstwą na liście będzie najmniej potężny, a ostatnią warstwą na liście będzie większość potężny. To znaczy tailwind-base jest najmniej potężny warstwa i wszelkie zawarte w niej kody zostaną nadpisane przez wszystkie kolejne warstwy. To również oznacza tailwind-utilities zawsze przebije inne style — niezależnie od kolejności źródła lub specyfiki. (Narzędzia i warianty mógłby przejść w osobnych warstwach, ale opiekunowie Tailwind zapewnią, że warianty zawsze przewyższają narzędzia, o ile dołączysz warianty poniżej dyrektywy utilities).

Wszystko, co nie znajduje się na warstwie, zastąpi wszystko, co znajduje się na warstwie (z wyjątkiem stylów, które używają !important). Możesz więc również zdecydować się na odejście utilities i variants na zewnątrz dowolnej warstwy:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Co nam to właściwie kupiło? Często zdarza się, że zaawansowane selektory CSS są bardzo przydatne. Stwórzmy wersję :focus-within który reaguje tylko na fokus klawiatury, a nie na kliknięcia myszą za pomocą :has selektor (który ląduje w Chrome 105). Spowoduje to stylizację elementu rodzica, gdy którykolwiek z jego elementów podrzędnych zostanie skupiony. Wprowadzono Tailwind 3.1 warianty niestandardowe - np <div class="[&:has(:focus-visible)]:outline-red-600"> — ale czasami łatwiej jest po prostu napisać 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;
  }
}

Powiedzmy, że w jednym przypadku chcemy zastąpić outline-color od blue do czegoś innego. Załóżmy, że element, z którym pracujemy, ma obie klasy Tailwind .outline-red-600 i nasze własne .radio-container:has(:focus-visible) klasa:

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

Który outline-color wygra?

Zwykle wyższa specyficzność .radio-container:has(:focus-visible) oznaczałoby, że klasa Tailwind nie ma żadnego efektu — nawet jeśli jest niższa w kolejności źródłowej. Ale w przeciwieństwie do Tailwind @layer dyrektywa, która opiera się na porządku źródłowym, standard CSS @layer unieważnia specyficzność.

W rezultacie możemy używać złożonych selektorów we własnych, niestandardowych stylach, ale w razie potrzeby nadal je zastępować klasami użytkowymi Tailwind — bez konieczności uciekania się do trudnych rąk. !important użycie, aby uzyskać to, czego chcemy.