Po co czyścić listę klas Tailwinda?
Po kilku iteracjach Twoje `className` wygląda tak: `"flex p-4 hover:bg-blue-500 px-4 text-sm hover:bg-blue-600 md:p-6 md:p-8 font-medium bg-white"`. Tu są trzy problemy: `p-4` jest pokryte przez `px-4` (redundancja), dwa razy `hover:bg-blue-...` (konflikt na hover), `md:p-6` nadpisane przez `md:p-8` (konflikt na breakpoint). I to wszystko jest wymieszane bez ładu.
Tool wykrywa konflikty ("p-4 nadpisane przez p-2", "md:p-4 vs md:p-8") i redundancje (`p-4` + `px-4` to nadmiar). Potem sortuje pozostałe klasy w konwencjonalnej kolejności: layout → positioning → sizing → spacing → typography → background → border → effects → states.
Wynik jest czytelny i bezbłędny. Pokazuje co usunięte, ile grup posortowane, statystyki.
Jak korzystać
- Wklej długi string className (z komponentu React/Vue/HTML) w lewy panel.
- Po prawej zobaczysz wyczyszczoną wersję plus listę znalezionych problemów.
- Każdy problem ma opis ("p-4 nadpisane przez p-2") - łatwo zrozumieć dlaczego klasa wyleciała.
- Włącz "Tylko sortuj" dla bezpiecznego trybu - tool nic nie wyrzuca, tylko porządkuje (przydatne gdy nie ufasz wykrywaniu konfliktów).
- Kliknij "Kopiuj" i wklej wynik z powrotem do JSX.
Do czego się przydaje
Typowe sytuacje:
- Long-running components. Karta produktu po 10 iteracjach designu ma 30 klas - większość zbędnych. Czyścisz, zostaje 12.
- Refaktoryzacja po wklejeniu klas z designu. Dostajesz od projektanta Figma-to-Tailwind plugin, który generuje rozdęte stringi - oczyszczasz.
- Code review. Komentarz "klasy są nieuporządkowane" - wkładasz przez tool, dostajesz spójny styl. Pasuje też do prettier-plugin-tailwindcss ale tu masz wykrywanie konfliktów.
- Migracja na nowe wersje Tailwinda. Zmiany w v4 (`gap-x-4` na `gap-x-4`, ale styl pewnych klas się różni) - łatwo zobaczyć co zostaje.
- Onboarding zespołu. Junior pisze `p-4 px-4 py-4` myśląc że to "asekuracja" - tool tłumaczy że `p-4` to to samo co `px-4 py-4`.
- Refaktoryzacja AI-generated code. AI generuje rozdęte className. Filtrujesz.
- Side-by-side z generatorem palet - dla wyboru kolorów sprawdź generator palety Tailwinda.
Dla kalkulacji specyficzności zobacz kalkulator specyficzności. Dla gradient CSS, generator gradientów.