Wklej CSS i dostań klasy Tailwind v4 dla każdego selektora albo wklej klasy i odzyskaj CSS. Hover, focus i breakpointy zamieniają się w warianty, a wszystko, czego nie da się przenieść, jest wypisane.
Wklej zwykłe reguły CSS, a ten konwerter zwróci listę klas Tailwind v4 dla każdego selektora, używając nazwanych klas tam, gdzie domyślny motyw ma dokładne dopasowanie, i wartości arbitralnych, takich jak w-[37px], tam, gdzie go nie ma. Odwróć kierunek, aby zamienić listę klas z powrotem na CSS. Selektory i reguły, które nie mogą stać się klasami, są wypisane, a nigdy po cichu pomijane.
Jak konwertują się popularne deklaracje (domyślny motyw Tailwind v4)
Ręczne przenoszenie arkusza stylów do Tailwind oznacza wyszukiwanie dziesiątek nazw klas i przeliczanie pikseli na rem w głowie. Ten konwerter robi wyszukiwanie i obliczenia za Ciebie, pokazuje, które klasy są wartościami arbitralnymi, które warto zaokrąglić do skali, i jasno mówi, które reguły muszą zostać w pliku CSS.
Do Tailwind v4 z domyślnym motywem. Odstępy są liczone z wartości --spacing równej 0.25rem, nazwy zaokrągleń idą za skalą v4 (rounded-xs to 2px, rounded-sm 4px, rounded-md 6px i tak dalej), a breakpointy używają wartości rem z v4.
Nazwana klasa jest używana tylko wtedy, gdy daje dokładnie tę samą wartość. Kolory zawsze stają się wartościami arbitralnymi, bo kod hex rzadko dokładnie pasuje do odcienia z palety, a rozmiary czcionek zostają arbitralne, bo nazwane rozmiary tekstu ustawiają też wysokość linii.
Selektorów z potomkami, rodzeństwem lub atrybutami, media queries, które nie są pojedynczym min-width, keyframes i innych at-rules oraz custom properties. Pojawiają się na liście nieprzekonwertowanych, abyś mógł przenieść je do pliku CSS.
Klasy z tabeli konwertera, wartości arbitralne i właściwości arbitralne wracają dokładnie, z odstępami pokazanymi jako wartości rem przy założeniu domyślnego --spacing. Nazwy kolorów motywu, takie jak bg-blue-500, i gotowe cienie nie są w tabeli i są wypisane jako pominięte, zamiast zgadywane.
Nie, ale składnia właściwości arbitralnej [property:value] obejmuje wszystko, dla czego Tailwind nie ma utility, na przykład [mask-type:luminance]. Ten konwerter używa jej dla każdej właściwości, której nie rozpoznaje.
Reguła karty ze stanem hover i breakpointem dla tabletu.
Każda deklaracja staje się klasą; reguły hover i breakpointu stają się klasami z prefiksem na tym samym elemencie.
Wklej reguły CSS lub listę klas Tailwind. Wartości arbitralne są podświetlone, a wszystko, czego nie da się przekonwertować, jest wypisane pod wynikiem.
Kierunek konwersji
CSS na Tailwind
Tailwind na CSS
Twój CSS
Twoje klasy Tailwind
Selektor dla wyniku CSS
Wynik
Kopiuj wszystko
Kopiuj klasy
Podświetlone klasy to wartości arbitralne: {n} z {t}.
Nieprzekonwertowane ({n})
Wszystko przekonwertowano.
Na razie nie ma nic do konwersji.
selektor wymaga klasy na innym elemencie lub własnego wariantu
media query nie ma pojedynczego breakpointu
at-rule zostaje w CSS
custom property, zostaw w CSS lub @theme
brak w tabeli tego konwertera
Zacznij za darmo · Bez karty kredytowej