Generator tailwind.config.js

Gotowa konfiguracja Tailwind CSS

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Konfiguracja Tailwind

Tryb ciemny

Ścieżki content (przecinkami)

Prefiks klas (opcjonalnie)

Wtyczki

@tailwindcss/typography

@tailwindcss/forms

@tailwindcss/aspect-ratio

@tailwindcss/line-clamp

@tailwindcss/container-queries

Przykładowa paleta primary

Ustaw opcje i wygeneruj plik konfiguracyjny Tailwind.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

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ć?

Opcja	Znaczenie
darkMode	class / media / selector — jak włącza się tryb ciemny
content	pliki, w których Tailwind szuka nazw klas
prefix	prefiks dodawany do klas, np. tw-
plugins	oficjalne wtyczki rozszerzające funkcje

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.

Najczęstsze pytania

Czy Tailwind 4 wymaga tego pliku?

W Tailwind 4 konfigurację przenosi się do CSS, ale plik JS nadal jest wspierany dla kompatybilności i rozbudowanych ustawień.

Dlaczego klasy nie działają?

Najczęstsza przyczyna to źle ustawione content. Tailwind skanuje tylko wskazane pliki — upewnij się, że obejmują wszystkie szablony.

Czy mogę używać własnych kolorów?

Tak — rozszerz paletę w sekcji theme.extend.colors. Generator udostępnia przykładową paletę primary.

Zobacz też — powiązane narzędzia