Konwerter CSS do Tailwind
Wklej stary CSS i otrzymaj punkt startowy utility-first do migracji, porządkowania albo szybkiego przepisania na Tailwind.
Wynik konwersji pojawi się tutaj.
Po co używać konwertera CSS do Tailwind?
Przyspieszenie migracji
Przenieś legacy CSS do procesu Tailwind szybciej, zamieniając znane deklaracje w kandydatów na utility classes zamiast tłumaczyć każdą linię ręcznie.
Obsługa arbitrary values
Zachowaj nietypowe wartości przez składnię arbitrary Tailwind, gdy nie istnieje standardowa klasa utility.
Refactor z myślą o przeglądzie
Traktuj wynik jako szkic migracji, a potem upraszczaj powtarzające się wartości do tokenów, komponentów, wariantów albo wzorców klas.
Często konwertowane właściwości
Złożone selektory, takie jak :hover, ::before albo media queries, po konwersji mogą nadal wymagać ręcznego uporządkowania.
Częste pytania
Czy konwerter zwraca gotowe klasy produkcyjne?
Nie. Automatyczna konwersja jest najlepsza jako punkt startowy. Złożone selektory, reguły responsywne, pseudo-elementy, zachowanie kaskady i semantyka komponentu nadal wymagają ludzkiego sprawdzenia.
Czy mogę wkleić same deklaracje bez selektora?
Tak. Narzędzie tymczasowo opakowuje samodzielne deklaracje, aby konwerter mógł je przetworzyć.
Co zrobić z powtarzającymi się arbitrary values?
Jeśli wartość powtarza się w UI, rozważ przeniesienie jej do tokenu motywu, klasy komponentu albo prymitywu design systemu zamiast zostawiać wiele jednorazowych utility.
Czy to konwertuje media queries i hover states?
Część prostych deklaracji da się przetłumaczyć, ale warianty responsywne, hover, pseudo-elementy i selektory zagnieżdżone często wymagają ręcznego czyszczenia po konwersji.