Paleta kolorów Tailwind

Domyślna paleta kolorów Tailwind zawiera 22 nazwane rodziny kolorów, a każda z nich ma 11 odcieni ponumerowanych od 50 do 950. Rodziny obejmują kolory neutralne (slate, gray, zinc, stone, neutral), ciepłe (red, orange, amber, yellow), chłodne (lime, green, emerald, teal, cyan, sky, blue, indigo, violet) oraz intensywne akcenty (purple, fuchsia, pink, rose). Każdy odcień został wcześniej zatwierdzony do użycia w systemie projektowym.

Numery odcieni określają jasność: 50 to niemal biel (delikatne zabarwienie), 100–300 to jasne pastele, 400–600 to intensywne odcienie pośrednie, 700–800 to ciemne i nasycone kolory, a 900–950 to niemal czerń. Zgodnie z praktyczną zasadą używaj 50–200 do teł, 400–600 do ikon i akcentów, a 700–900 do tekstu, aby zapewnić czytelny kontrast na białym tle.

Kolory tła stosuje się za pomocą narzędzia bg-{color}-{shade}. Ustawia ono właściwość CSS background-color dla elementu. Użyj jasnego odcienia, takiego jak bg-indigo-50, dla subtelnych teł sekcji, średniego odcienia, takiego jak bg-indigo-600, dla głównych przycisków oraz ciemnego odcienia, takiego jak bg-indigo-950, dla teł stopki i paska bocznego. Zawsze połącz go z kolorem tekstu zapewniającym wystarczający kontrast.

Oprócz numerowanej palety Tailwind udostępnia kilka specjalnych słów kluczowych kolorów. bg-white i bg-black ustawiają odpowiednio czystą biel i czerń. bg-transparent sprawia, że tło jest przezroczyste (dziedziczy je po elemencie nadrzędnym). bg-current używa bieżącego koloru tekstu elementu jako koloru tła. bg-inherit jawnie dziedziczy tło po elemencie nadrzędnym.

Wybór między ciepłymi a chłodnymi kolorami wpływa na emocjonalny charakter projektu. Ciepłe kolory (red, orange, amber, yellow) przekazują energię, pilność i ciepło — świetnie sprawdzają się w alertach, odznakach promocji i stanach ostrzegawczych. Chłodne kolory (blue, indigo, teal, cyan) kojarzą się z zaufaniem, spokojem i profesjonalizmem — idealnie pasują do głównych działań, dashboardów z danymi i aplikacji firmowych.

Tailwind oferuje pięć rodzin neutralnych szarości: slate (z odcieniem niebieskoszarym), gray (neutralny), zinc (lekko ciepły), neutral (czysto neutralny) oraz stone (ciepły, piaskowy). Różnica między nimi jest subtelna, ale ma znaczenie dla identyfikacji marki. Slate pasuje do produktów technologicznych i deweloperskich. Gray sprawdza się uniwersalnie. Stone pasuje do naturalnych marek inspirowanych ziemią. Wybierz jedną rodzinę i stosuj ją konsekwentnie w całym projekcie.

Praktycznym zastosowaniem rodzin kolorów Tailwind jest budowanie systemu wskaźników statusu. Przypisz stany semantyczne do rodzin kolorów: powodzenie do green, ostrzeżenie do yellow, błąd do red, informację do blue, a stan neutralny do gray. Użyj odcienia 100 dla tła i odcienia 700 dla tekstu, aby zapewnić zarówno kontrast, jak i spójność wizualną.

Modyfikator krycia z ukośnikiem działa również dla kolorów tła. bg-blue-600/20 stosuje kolor blue-600 z kryciem 20%, tworząc efekt półprzezroczystego zabarwienia. Jest on często używany w przypadku teł nakładanych, efektów matowego szkła oraz kolorowych teł wyróżnień za treścią, bez całkowitego zasłaniania tego, co znajduje się za nimi.

Popularny schemat polega na wyborze jednego koloru głównego dla najważniejszych elementów interaktywnych oraz jednego koloru akcentującego do wyróżniania kluczowych informacji. Na przykład indigo jako kolor główny i amber jako akcent. Oba kolory znajdują się już w palecie Tailwind, więc od razu dostępny jest pełny zakres odcieni bez dodatkowej konfiguracji.

W trybie ciemnym tła zmieniają się z jasnych na ciemne odcienie. Użyj prefiksu dark:, aby ustawić kolory tła dla ciemnego motywu. Typowy schemat to: główne tło bg-white dark:bg-gray-900, powierzchnia karty bg-gray-50 dark:bg-gray-800 oraz elementy wyniesione bg-white dark:bg-gray-700. Ten trzystopniowy system wyniesienia tworzy głębię w ciemnych interfejsach.

Jeśli domyślna paleta nie pasuje do Państwa marki, można ją rozszerzyć w pliku tailwind.config.js w sekcji theme.extend.colors. Można dodać całkowicie nowe rodziny kolorów z niestandardowymi odcieniami albo pojedynczy kolor marki. Po zdefiniowaniu nowy kolor jest dostępny we wszystkich narzędziach Tailwind: bg-brand-500, text-brand-700, border-brand-300 itd.

W tej lekcji poznali Państwo: 22 rodziny kolorów Tailwind, z których każda ma 11 odcieni od 50 (jasnego) do 950 (ciemnego), klasa bg-{color}-{shade} ustawia kolor tła, a modyfikator /opacity dodaje przezroczystość oraz ciepłe kolory wyrażają pilność, a chłodne budują zaufanie. Następnie utworzymy gradienty za pomocą narzędzi Tailwind do tworzenia gradientowych teł.