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.