Softonic

CSS na Tailwind

Krok 1 / 2
Konwertuj na Tailwind

Przenoszenie starego arkusza stylów do Tailwind reguła po regule jest żmudne. Ten konwerter przyjmuje blok zwykłego kodu CSS, z selektorami i nawiasami klamrowymi lub bez nich, i przepisuje każdą deklarację jako narzędzie Tailwind. Rozpoznane pary są mapowane na nazwane klasy narzędziowe, takie jak flex, items-center czy rounded-lg, a wszystko inne jest sprowadzane do składni wartości dowolnych Tailwind [property:value], dzięki czemu nic nie zostaje po cichu pominięte.

Jak konwerter przetwarza Twój kod CSS

  1. 1

    Wklej kod CSS

    Wklej pełną regułę, taką jak `.card { padding: 16px; border-radius: 8px; }`, albo same deklaracje znajdujące się w nawiasach klamrowych.

  2. 2

    Parser usuwa komentarze

    Komentarze blokowe `/* ... */` są usuwane, zanim deklaracje zostaną rozdzielone na średnikach.

  3. 3

    Każda deklaracja jest mapowana

    Typowe właściwości są mapowane na rzeczywiste klasy narzędziowe Tailwind (odstępy, promień, rozmiar czcionki, flex, wyświetlanie, wyrównanie tekstu); nieznane właściwości są sprowadzane do `[prop:value]`.

  4. 4

    Skopiuj i zastosuj

    Wklej listę klas do atrybutu `class` odpowiadającego elementu HTML.

Co jest mapowane na nazwane klasy narzędziowe

Domyślny motyw Tailwind nie jest w stanie objąć każdej możliwej wartości CSS, dlatego konwerter w pierwszej kolejności obsługuje te wartości, dla których istnieje nazwana klasa narzędziowa, a we wszystkich pozostałych przypadkach stosuje wartości dowolne.

Mapowania bezpośrednie

Deklaracja CSS Klasa narzędziowa Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Mapowania uwzględniające skalę

Wartości padding, margin, width, height oraz wymiarów min/max są dzielone przez 4, aby uzyskać krok odstępu Tailwind, padding: 16px staje się p-4, a width: 32px staje się w-8. Wartości, które nie trafiają w równy krok, są sprowadzane do wartości dowolnych na odpowiedniej klasie narzędziowej, na przykład width: 37px staje się w-[37px].

border-radius jest mapowane na najbliższą nazwaną klasę narzędziową (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Rozmiary powyżej 16px stają się rounded-full, co jest przydatne w przypadku elementów w kształcie pigułki, ale nieprawidłowe dla nietypowo dużych promieni, sprawdź wynik przed wdrożeniem.

font-size jest przydzielane do przedziałów od text-xs do text-3xl na podstawie progów pikselowych.

Uwagi

  • Pseudoklasy, zapytania medialne i selektory nie są tłumaczone; tłumaczone są wyłącznie deklaracje wewnątrz nawiasów klamrowych. Warianty takie jak hover: czy md: nadal musisz dodać samodzielnie.
  • Kolory trafiają do wartości dowolnych, takich jak text-[#1f2937], ponieważ konwerter nie zna palety Twojego motywu Tailwind. Zamień je ręcznie na text-gray-800 lub własny token.
  • Właściwości skrócone, których używasz rzadko (border, background, transition), są zwracane dosłownie jako [property:value], sprawdź je przed wdrożeniem.

Najczęściej zadawane pytania

Wynik używa nazw klas narzędziowych, które są stabilne zarówno w Tailwind v3, jak i v4. Wartości dowolne w nawiasach kwadratowych są prawidłowe w obu wersjach. Po wklejeniu warto ponownie stokenizować kolory do palety @theme w wersji v4.

Konwerter nie ma wglądu w Twoją skalę kolorów w tailwind.config.js. Przypisz wartość dowolną ręcznie do najbliższego tokena palety, na przykład text-gray-800 lub zdefiniowanego przez Ciebie tokena marki.

Tak, wklej wiele reguł. Narzędzie wygeneruje jedną listę klas na każdy selektor, oddzieloną komentarzem /* selector */, dzięki czemu możesz dopasować je do odpowiedniego kodu HTML.

Kod CSS jest wysyłany na nasz serwer, aby konwerter mógł zamienić go na klasy Tailwind. Nie jest przechowywany ani dodawany do linku strony.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Ściągawka do Markdown

Praktyczna ściągawka Markdown z prawdziwym podglądem i przykładami gotowymi do skopiowania: nagłówki, listy, tabele, kod, linki, obrazy i składnia GFM.

Symulator licznika rozkazów

Śledź uproszczony listing instrukcji o stałej długości z etykietami, skokami, wywołaniami, powrotami i adresami 16-, 24- lub 32-bitowymi.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Narzędzie jest dostępne w innych językach