Sortowanie klas Tailwind
Uporządkuj klasy utility w atrybutach class/className w zalecanym porządku Tailwind.
Sortowanie klas Tailwind
Wklej HTML lub JSX, a to narzędzie zmieni kolejność klas w każdym atrybucie class i className, aby odpowiadały zalecanemu porządkowi Tailwind CSS – takim samym porządkiem kategorii, jakie stosuje oficjalny prettier-plugin-tailwindcss: najpierw layout i pozycjonowanie, potem flexbox i grid, odstępy, rozmiary, typografia, tła, obramowania, efekty i tak dalej, z wariantami responsywnymi i stanowymi (hover:, sm:, dark:) umieszczonymi po podstawowej utility, którą modyfikują. Spójny porządek zmniejsza różnice i ułatwia przegląd pull requestów, ponieważ dwaj programiści, którzy napiszą "flex p-4 text-white" i "text-white p-4 flex", skończy się identycznym wyjściem.
Wybierz, czy chcesz przetwarzać cały wklejony dokument – skanując każdy atrybut class i className, który znajdzie – czy potraktować wejście jako jedną samodzielną listę klas bez niczego wokół. Niestandardowe klasy (twoje klasy komponentów, nazwy utility z frameworka CSS, których to narzędzie nie rozpoznaje) są utrzymywane razem na początku lub na końcu każdej listy, zamiast być rozproszone. Włącz "Usuń zduplikowane klasy", aby usunąć dokładne powtórzenia, i "Ostrzegaj o klasach, które się wykluczają", aby oznaczyć pary takie jak p-4 i p-2 lub block i hidden, które się nawzajem zastępują przy wspólnym zastosowaniu – liczba pojawi się w żywym liczniku poniżej wyjścia. "Grupuj warianty responsywne razem" skupia wszystkie klasy sm:, md: i lg: na końcu zamiast przeplatania każdej obok jej nieprefixowanego odpowiednika, co niektóre zespoły preferują do szybkiego skanowania.
Klasy wewnątrz szablonu zawierającego wyrażenie JavaScript, takie jak className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, są domyślnie pozostawiane niezmienione, ponieważ narzędzie nie może wiedzieć, co zmienna wyświetli w czasie wykonywania – wyłącz "Nie zmieniaj dynamicznych klas w wyrażeniach szablonów", aby zamiast tego sortować wokół nich, traktując każde wyrażenie jako nieprzezroczysty token. Wyjście jako zmodyfikowany kod źródłowy, gotowy do wklejenia z powrotem do edytora, lub jako czysta posortowana lista, jeden na linię.
Wszystko działa lokalnie w twojej przeglądarce – HTML, JSX lub lista klas, którą wkleisz, nigdy nie jest nigdzie wysyłana. Gdy skończy się, skopiuj wynik, pobierz go jako plik .txt lub wyślij wyjście z powrotem do wejścia, aby uruchomić inne narzędzie.