Czy można przekonwertować CSS na Tailwind?

Tak. Wklej blok deklaracji CSS, a Tailfind zastosuje go do przykładowego elementu przed wyeksportowaniem najbliższej listy klas Tailwind.

Czy wartości niestandardowe są zachowywane?

Tailfind odwzorowuje wartości na domyślne klasy Tailwind, jeśli to możliwe, a niestandardowe wartości pozostawia widoczne jako klasy arbitralne zamiast je ukrywać.

Czy powinienem wkleić pełny arkusz stylów?

Konwerter CSS przeznaczony jest do bloków deklaracji. Użyj konwertera HTML/CSS, gdy potrzebne są selektory, klasy, zagnieżdżone znaczniki lub pełniejszy arkusz stylów.

Konwerter CSS na Tailwind

Wklej blok deklaracji CSS i przekonwertuj wyrenderowaną próbkę na klasy Tailwind, które możesz skopiować do komponentów.

CSS

Tailwind v4

Brak jeszcze danych wyjściowych

Wygenerowane dane wyjściowe Tailwind pojawiają się tutaj automatycznie.

Perfekcyjny w pikselach konwerter Tailwind

Konwertuj CSS na czyste klasy Tailwind

Konwersja od deklaracji: Wklej blok deklaracji CSS, a Tailfind zastosuje go do przykładowego elementu przed konwersją wyrenderowanego wyniku na klasy Tailwind wielokrotnego użytku.
Priorytet dla klas standardowych: Domyślne wartości przenośnego Tailwind są zachowywane, gdy wartości deklaracji odpowiadają skali frameworka.
Fallback dla wartości arbitralnych: Niestandardowe wartości stają się jawnymi klasami arbitralnymi, dzięki czemu łatwo sprawdzić własne piksele, kolory, cienie i timing.
Wynik bezpieczny dla układu: Odstępy, rozmiar, wyświetlanie, siatka, elastyczność, obramowania, cienie i typografia są odwzorowywane na podstawie wyrenderowanej próbki.
Szybka ekstrakcja klas: Wynik to zwięzła lista klas Tailwind, którą można skopiować do komponentu, eksperymentu z tokenami lub etapu porządkowania.
Dobre do audytów: Użyj go, aby zastąpić jednorazowe bloki CSS, eksperymenty inline i prototypy design systemów bardziej przejrzystymi klasami Tailwind.

Przewodnik po konwerterze CSS

Zmień deklaracje CSS w klasy Tailwind

Konwerter CSS na Tailwind zamienia blok deklaracji w najbliższe przenośne klasy Tailwind. Przydaje się do jednorazowych design tokenów, czyszczenia stylów inline i przenoszenia małych fragmentów CSS do markup komponentów.

Tailfind stosuje deklaracje do przykładowego elementu przed konwersją, więc układ, odstępy, kolor, obramowanie, cień, typografia i wartości rozmiaru są interpretowane za pomocą tej samej ścieżki renderowania przeglądarki, której używa rozszerzenie.

Użyj go do konwersji właściwości CSS na klasy Tailwind, sprawdzenia zgodności ze standardową skalą Tailwind i zachowania niestandardowych wartości jako jawnych klas arbitralnych.

Czy można przekonwertować CSS na Tailwind?: Tak. Wklej blok deklaracji CSS, a Tailfind zastosuje go do przykładowego elementu przed wyeksportowaniem najbliższej listy klas Tailwind.
Czy wartości niestandardowe są zachowywane?: Tailfind odwzorowuje wartości na domyślne klasy Tailwind, jeśli to możliwe, a niestandardowe wartości pozostawia widoczne jako klasy arbitralne zamiast je ukrywać.
Czy powinienem wkleić pełny arkusz stylów?: Konwerter CSS przeznaczony jest do bloków deklaracji. Użyj konwertera HTML/CSS, gdy potrzebne są selektory, klasy, zagnieżdżone znaczniki lub pełniejszy arkusz stylów.

Pomiń ręczną konwersję

Konwertuj działającą stronę
do Tailwind CSS

Tailfind udostępnia konwerter w przeglądarce, dzięki czemu możesz przechwycić produkcyjny interfejs użytkownika bezpośrednio z przeglądanej strony.

Więcej informacji

Pobierz