Używanie zmiennych CSS w Tailwind

Właściwości niestandardowe CSS (nazywane też zmiennymi CSS) pozwalają zdefiniować wartości raz i odwoływać się do nich w całym arkuszu stylów. Są to wartości działające w czasie wykonywania — można je zmieniać za pomocą JavaScriptu lub przez przełączanie klasy na elemencie nadrzędnym. Połączenie zmiennych CSS z konfiguracją Tailwind tworzy zaawansowany system obsługi motywów: tokeny projektowe są przechowywane w zmiennych CSS, a Tailwind generuje klasy narzędziowe odwołujące się do tych zmiennych.

Powiąż zmienne CSS z konfiguracją Tailwind, używając składni var(--variable-name) jako wartości. Spowoduje to utworzenie klas narzędziowych, które w wygenerowanym CSS będą zwracać odwołania var(). W czasie wykonywania, gdy wartość zmiennej ulegnie zmianie (na przykład w trybie ciemnym lub po przełączeniu motywu), wszystkie elementy korzystające z tych klas narzędziowych zostaną natychmiast zaktualizowane — bez ponownego budowania CSS i przełączania dodatkowych klas.

Jeśli chce Pan / Pani obsługiwać modyfikator krycia (bg-primary/50) dla kolorów przechowywanych w zmiennych CSS, Tailwind musi wiedzieć, jak zastosować krycie. Rozwiązaniem jest przechowywanie kolorów jako rozdzielonych spacjami wartości kanałów RGB i użycie symbolu zastępczego <alpha-value> w konfiguracji. Tailwind zastępuje ten symbol ułamkiem krycia podczas kompilacji, generując poprawną składnię rgba() lub rgb(... / alpha).

Najbardziej eleganckim zastosowaniem zmiennych CSS w Tailwind jest automatyczny tryb ciemny bez umieszczania wszędzie prefiksów dark:. Należy zdefiniować tokeny semantyczne (powierzchnia, tekst, obramowanie) jako zmienne CSS i zmieniać ich wartości w selektorze .dark. Komponenty korzystające z bg-surface automatycznie otrzymają ciemne tło — bez potrzeby dodawania dodatkowych klas do poszczególnych elementów. Znacznie zmniejsza to ilość znaczników potrzebnych do obsługi trybu ciemnego.

Zmienne CSS umożliwiają obsługę wielu motywów, nie tylko jasnego i ciemnego. Należy zdefiniować zestaw zmiennych CSS dla każdego motywu i stosować poszczególne zestawy przez przełączanie atrybutu data-theme lub klasy na elemencie głównym. Użytkownicy mogą natychmiast przełączyć domyślny niebieski motyw na zielony albo wysokokontrastowy, a wszystkie narzędzia Tailwind odwołujące się do tych zmiennych zostaną zaktualizowane w czasie rzeczywistym.

W plikach CSS przetwarzanych przez Tailwind specjalna funkcja theme() umożliwia bezpośrednie odwoływanie się do wartości motywu Tailwind. Można jej używać w niestandardowych regułach CSS lub blokach @layer, aby uzyskać dostęp do skonfigurowanych wartości kolorów, odstępów i typografii. Jest to odwrotność poprzedniego wzorca — zamiast umieszczać zmienne CSS w konfiguracji Tailwind, przenosi się wartości tokenów Tailwind do CSS.

Zmienne CSS można łączyć z @apply w niestandardowych warstwach CSS. Należy zdefiniować klasę komponentu, używając @apply dla większości narzędzi, a następnie zastosować zmienne CSS dla wartości, które muszą zmieniać się w czasie wykonywania. Takie hybrydowe podejście pozwala zachować zwięzły kod HTML, a jednocześnie umożliwia dynamiczną obsługę motywów dla najważniejszych wartości systemu projektowego.

Tokeny typografii, takie jak rozmiar czcionki, wysokość wiersza i odstępy między literami, również można definiować jako zmienne CSS i wykorzystywać w konfiguracji Tailwind. Umożliwia to responsywną typografię, w której JavaScript dostosowuje zmienne font-size na podstawie warunków związanych z obszarem widoku, a także skalowanie czcionki przyjazne dla dostępności, dzięki któremu użytkownicy mogą zwiększać rozmiar tekstu, a zmienne automatycznie propagują się w całym systemie projektowym.

Właściwości niestandardowe CSS są obsługiwane we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge). NIE są obsługiwane w Internet Explorerze 11. Jeśli projekt musi obsługiwać IE11, nie można używać zmiennych CSS do obsługi motywów. W przypadku wszystkich pozostałych projektów (czyli zdecydowanej większości obecnie) zmienne CSS są bezpiecznym i zaawansowanym rozwiązaniem, szeroko obsługiwanym przez przeglądarki używane na całym świecie.

Zmienne CSS można łatwo sprawdzać i debugować w narzędziach DevTools przeglądarki. Należy wybrać dowolny element i przejść do karty Computed — pojawią się tam obliczone wartości używanych zmiennych CSS. Panel Elements pokazuje deklarację zmiennej w kaskadzie. Można nawet bezpośrednio nadpisywać wartości zmiennych CSS w DevTools, aby podglądać zmiany motywu bez modyfikowania kodu, co doskonale sprawdza się podczas szybkiego iterowania nad tokenami projektowymi.

Statycznych wartości konfiguracji należy używać dla tokenów projektowych, które nigdy nie zmieniają się w czasie wykonywania — skali odstępów, skali zaokrągleń obramowania, punktów przerwania i skali rozmiarów czcionki. Zmiennych CSS należy używać dla tokenów zmieniających się zależnie od motywu, preferencji użytkownika lub kontekstu wykonywania — kolorów, teł powierzchni, kolorów tekstu i semantycznych tokenów projektowych. Taki podział przechowuje w CSS elementy systemu projektowego zmieniające się w czasie wykonywania, a strukturalne reguły układu pozostawia w konfiguracji, gdzie są przetwarzane podczas budowania.

W tej lekcji nauczył się Pan / nauczyła się Pani: zmienne CSS w konfiguracji Tailwind tworzą tokeny projektowe przełączane w czasie wykonywania; symbolu zastępczego <alpha-value> należy używać wraz ze zmiennymi kanałów RGB, aby obsługiwać modyfikator krycia; a semantyczne zmienne CSS przełączane w selektorze .dark lub [data-theme] umożliwiają automatyczną obsługę motywów bez klas dark: na poszczególnych elementach. W następnej części szczegółowo omówimy dyrektywę @apply służącą do wydzielania powtarzających się wzorców narzędziowych.