Przejdź do treści
Toova
Wszystkie narzędzia

Utility Tailwinda → CSS

Prywatne z założenia — działa w całości w Państwa przeglądarce

Wklej listę utility Tailwinda razem z selektorem, a Toova zbuduje odpowiadającą regułę CSS. Klasy arbitralne jak p-[13px] albo [grid-template-columns:1fr_2fr] są rozpakowywane do surowych deklaracji, gotowych do umieszczenia w arkuszu stylów.

Kiedy odwrotny kierunek się przydaje

Czasem prototypujesz w Tailwindzie, ale wdrażasz CSS — newsletter marketingowy, widget od zewnętrznego dostawcy, przekazanie do CMS-u, który nie ładuje Tailwinda. Konwerter składa listę utility w jedną regułę pod wybranym selektorem, więc wklejasz bezpośrednio, bez przemianowywania czy oczyszczania markupu z playgrounda.

Jak wracają wartości arbitralne

Arbitralne klasy Tailwinda niosą wartość w nazwie: p-[13px] to padding: 13px, [grid-template-columns:1fr_2fr] to grid-template-columns: 1fr 2fr. Konwerter rozpakowuje obie formy dosłownie, więc każda wartość zakodowana przez JIT przeżywa drogę bez dodatkowej tabeli mapowania.

Ograniczenia i round-trip

Warianty responsywne (md:flex), stanowe (hover:bg-black) i dark-mode (dark:text-white) wymagają opakowania media query albo pseudoklasą, więc konwerter ich jeszcze nie generuje — usuń je przed wklejaniem. Tokeny motywu (text-brand) spadają do domyślnej skali; przy własnym motywie spodziewaj się fallbacków arbitrary. Proste utility round-trippują czysto z narzędziem CSS-to-Tailwind.

Najczęściej zadawane pytania

Co jest konwertowane?
Standardowe utility Tailwinda dla spacing, kolorów, typografii, flex i position oraz każda forma arbitralna [value] lub [prop:value]. Warianty nie są jeszcze obsługiwane.
Dlaczego pytany jest selektor?
Wynik to pojedyncza reguła CSS. Wybór selektora pozwala wkleić ją wprost w arkusz stylów bez zmieniania nazwy ani opakowywania.
Czy obsługiwane są warianty responsywne i hover?
Jeszcze nie — wymagają opakowania media query albo pseudoklasą. Usuń prefiksy md:, hover: i dark: przed wklejeniem; podstawowe utility round-trippują czysto.
Czy zna mój motyw Tailwinda?
Nie. Stosuje domyślną skalę. Spersonalizowane spacing lub kolory spadną do arbitrary w wyniku, ale CSS pozostanie działający.
Czy mogę przepuścić CSS przez odwrotne narzędzie?
Tak — dla prostych utility round-trip jest dokładny. Wartości arbitralne przeżywają, a niewspierane deklaracje pozostają arbitrary.
Czy moje dane są wysyłane?
Nie. Cała konwersja działa w tej karcie; Toova nie widzi twoich klas, selektorów ani wyniku.