Generator tailwind.config.js

Generator konfiguracji Tailwind CSS

Tailwind CSS to framework utility-first. Plik tailwind.config.js steruje m.in. trybem ciemnym, ścieżkami plików do skanowania i zestawem wtyczek.

Co można ustawić?

Tryb ciemny: class czy media

media reaguje na ustawienie systemowe. class pozwala przełączać motyw ręcznie klasą dark na elemencie html — daje pełną kontrolę.

Popularne wtyczki

• @tailwindcss/typography — stylowanie treści artykułów.
• @tailwindcss/forms — spójny wygląd pól formularzy.
• @tailwindcss/aspect-ratio, line-clamp, container-queries — nowe utility.

Jak działa generator tailwind.config.js

Generator zbiera decyzje, które normalnie wpisujesz ręcznie w pliku konfiguracyjnym, i zapisuje je jako obiekt JavaScript eksportowany na końcu pliku. Tailwind przy starcie procesu budującego wczytuje ten obiekt, a następnie na jego podstawie tworzy warianty klas oraz rejestr utility. Kolejność ma znaczenie: najpierw czytana jest sekcja content i skanowane są wskazane pliki, dopiero potem z rozpoznanych nazw klas powstaje wynikowy CSS.

Każde pole działa na innym etapie. darkMode decyduje, w jaki sposób generowane są warianty z przedrostkiem dark: — przy wartości media są one powiązane z ustawieniem systemowym, przy class z klasą dark na elemencie nadrzędnym, a przy selector z własnym selektorem podanym w konfiguracji. Prefix nie zmienia wyglądu, a wyłącznie nazwy klas: każda utility otrzymuje przedrostek, więc w HTML trzeba go dopisywać za każdym razem.

Sekcja plugins to lista wtyczek rozszerzających zestaw utility albo modyfikujących style bazowe. Wtyczki działają globalnie, dlatego dwie wtyczki ingerujące w te same elementy mogą się nakładać. Paleta kolorów trafia do theme.extend.colors i jest wyłącznie rozszerzeniem — nie usuwa kolorów domyślnych, które nadal są dostępne w klasach.

Przykład krok po kroku

1. Wybierasz tryb ciemny. Dostępne są trzy wartości: class, media i selector. Wybierasz class, więc pozostałe dwie zostają niewykorzystane.
2. Wpisujesz ścieżki w content, czyli katalogi i pliki, w których Tailwind ma szukać nazw klas. Jeśli pominiesz choćby jeden szablon, klasy użyte tylko w nim nie znajdą się w wynikowym CSS.
3. Ustawiasz prefix na tw-. Od tej chwili każda klasa wymaga przedrostka: bg-blue-500 zapisujesz jako tw-bg-blue-500, a wariant trybu ciemnego jako tw-dark:bg-blue-500.
4. Z pięciu wtyczek wymienionych wyżej zaznaczasz dwie: @tailwindcss/typography oraz @tailwindcss/forms. Trzy pozostałe pozostają poza konfiguracją, więc ich utility nie pojawią się w arkuszu.
5. Dodajesz przykładową paletę primary w theme.extend.colors, przez co klasy z tej palety współistnieją z paletą domyślną.
6. Zapisujesz plik w katalogu głównym projektu i restartujesz proces budujący. Dopiero po restarcie nowe ścieżki content oraz prefiks są brane pod uwagę. Podsumowując: plik opisuje pięć obszarów konfiguracji, jeden tryb ciemny z trzech możliwych i dwie wtyczki z pięciu.

Pola konfiguracji — tabela referencyjna

Praktyczne wskazówki

• Zacznij od content, nie od kolorów. Najczęstszy powód braku klas w wynikowym CSS to niepełna lista skanowanych plików. Ustaw ją, zanim zaczniesz rozbudowywać motyw.
• Prefix wybieraj świadomie i jednorazowo. Zmiana prefiksu po wdrożeniu oznacza poprawki we wszystkich szablonach, w których klasa występuje. Jeśli nie masz kolizji nazw z innym frameworkiem, łatwiej zostać przy braku prefiksu.
• Rozszerzaj zamiast nadpisywać. Sekcja theme.extend.colors dodaje kolory, natomiast nadpisanie całej palety odcina dostęp do reszty domyślnych wartości. Przy przykładowej palecie primary nie musisz rezygnować z niczego.
• Wtyczki dodawaj pojedynczo. @tailwindcss/typography i @tailwindcss/forms zmieniają style bazowe, a wtyczki pokroju aspect-ratio, line-clamp i container-queries dokładają utility. Łatwiej wychwycić efekt jednej zmiany niż trzech naraz.
• Po zmianie konfiguracji zrestartuj build. Plik jest czytany przy starcie procesu, więc sam zapis nie zawsze wystarczy, aby nowe ustawienia zadziałały.

Ograniczenia narzędzia

• Nie sprawdza, czy ścieżki istnieją. Generator zapisze dowolną listę w content, nawet jeśli katalog nie istnieje. Błąd zobaczysz dopiero po tym, jak klasy nie pojawią się w arkuszu.
• Nie wykrywa konfliktów nazw klas. Jeśli używasz prefiksu, narzędzie nie sprawdzi, czy wybrany przedrostek nie koliduje z klasami z innego arkusza w projekcie.
• Nie weryfikuje instalacji wtyczek. Zaznaczenie wtyczki w konfiguracji nie instaluje pakietu. Bez odpowiedniej zależności w projekcie proces budujący zgłosi błąd.
• Nie ocenia wpływu na rozmiar CSS. Wynik zależy od tego, ile klas faktycznie występuje w skanowanych plikach i jak szeroka jest paleta. Generator nie poda żadnej wartości progowej ani szacunku.

Najczęstsze pytania