Przejdź do treści
Numio

Konwerter CSS na Tailwind — klasy Tailwind z CSS — Numio

Konwertuj deklaracje CSS na klasy narzędziowe Tailwind CSS, przedstawione jako reguły @apply dla każdego selektora. Używaj narzędzia do szukania odpowiadających klas podczas migracji istniejących stylów. Konwerter jest przeznaczony dla Tailwind CSS v3.

Znajdź klasy Tailwind odpowiadające istniejącym regułom CSS podczas migracji.

CSS

TailwindCSS 3.x

Kiedy go używać

  • Znajdź klasy Tailwind odpowiadające istniejącym regułom CSS podczas migracji.
  • Poznaj nazwy klas Tailwind, konwertując znany Ci CSS.

Jak używać

  1. Wklej reguły CSS.
  2. Dostosuj bazową wartość rem lub konfigurację Tailwind, jeśli projekt używa własnych ustawień.
  3. Skopiuj klasy po @apply do kodu HTML lub arkusza stylów, a następnie sprawdź wynik w projekcie Tailwind.

Kod CSS

.card { display: flex; padding: 1rem; }

Wynik Tailwind (domyślna skala)

.card {
  @apply flex p-4;
}

Szczegóły i ograniczenia

Nazwy klas i skale odpowiadają Tailwind CSS v3. Zgodność z konfiguracją i składnią Tailwind CSS v4 nie jest gwarantowana.

Własne wartości, złożone selektory i pseudoelementy mogą nie zostać przekonwertowane. Identyczny wygląd wyniku nie jest gwarantowany, dlatego sprawdź go na rzeczywistej stronie.

Pole własnej konfiguracji jest wykonywane jako JavaScript w przeglądarce. Nie wklejaj konfiguracji z niezaufanego źródła.

FAQ

Czy narzędzie obsługuje Tailwind CSS v4?

Używa nazw klas i skal Tailwind CSS v3. Wiele klas, np. flex, p-4 i text-sm, zachowuje nazwy w v4, ale v4 przenosi konfigurację do CSS i zmienia nazwy części klas, dlatego sprawdź wynik w projekcie v4.

Jak użyć nazw klas zamiast @apply?

Skopiuj listę po @apply do atrybutu class elementu, np. class="flex p-4". Postać @apply grupuje klasy według pierwotnego selektora.

Czy można konwertować klasy Bootstrap na Tailwind?

Nie. Narzędzie konwertuje deklaracje CSS, a nie nazwy klas z innego frameworka. Wklej reguły CSS komponentu Bootstrap, aby zobaczyć odpowiadające im klasy.

Dlaczego część deklaracji nie jest konwertowana?

Wartości spoza skali Tailwind, złożone selektory i pseudoelementy mogą nie mieć bezpośrednich odpowiedników. Zachowaj je jako CSS lub dodaj do konfiguracji Tailwind.