Które właściwości CSS są rozpoznawane?

Skala spacing dla padding i margin, kolory tekstu i tła, display, wyrównanie flex, rozmiary i wagi czcionek, border-radius, width i height, position oraz gap. Reszta trafia do klasy arbitralnej [prop:value].

Co z wartościami spoza standardowej skali?

Konwerter zwraca notację arbitralną jak p-[13px] albo bg-[#3b82f6]. JIT to kompiluje i klasa pozostaje poprawnym Tailwindem bez ręcznej edycji.

Czy obsługuje zmienne CSS?

Tak. Wartości var(--token) wychodzą w nawiasach kwadratowych. Sama zmienna nadal musi być zadeklarowana w theme tailwind.config lub jako custom property w :root.

Czy konwersja jest bezstratna?

Dla typowych wzorców tak. Animacje, gradienty i nietypowe selektory zostają klasami arbitralnymi — przetrwają, ale czasem warto zatrzymać oryginalny CSS.

Czy można wrócić przez Tailwind-to-CSS?

W większości tak. Proste utility wracają identycznie; wartości arbitralne przetrwają, ale nieobsługiwane deklaracje pozostają w formie arbitralnej również w drodze powrotnej.

Czy coś jest przesyłane?

Nie. Cała konwersja działa w tej karcie przeglądarki; treść arkusza stylów nie opuszcza strony.

CSS do Tailwinda — deklaracje na utility

CSS → utility Tailwinda

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

Po lewej wklej deklaracje CSS, po prawej skopiuj klasy utility Tailwinda. Konwerter mapuje standardowe skale spacing, koloru, typografii i layoutu na natywne utility, a dla wartości spoza znanej puli wraca do notacji w nawiasach kwadratowych.

Mapowane właściwości

Konwerter obsługuje codzienne pole CSS: spacing dla padding i margin, rozmiary i wagi czcionek, kolory (text i bg), display, kierunek i wyrównanie flex, border-radius, width i height, position oraz gap. Każda właściwość spada na kanoniczny skrót Tailwinda — p-4, text-lg, justify-between — więc wynik czyta się jak ręcznie napisany Tailwind.

Po co notacja arbitralna

Realne projekty często mają wartości bez skrótów: 13-pikselowy custom font, brandowy kolor w konkretnym hexie, gap 1.7rem. W takich sytuacjach konwerter wypuszcza arbitralną formę Tailwinda — text-[13px] albo bg-[#3b82f6]. Klasa pozostaje poprawnym Tailwindem, JIT ją obsługuje, a round-trip do Tailwind-to-CSS przechodzi czysto.

Kiedy deklaracja przechodzi bez zmian

Złożone selektory, animacje, gradienty i keyframes są celowo nieskonwertowane — należą do warstw, które Tailwind obsługuje przez wtyczki lub @apply, a heurystyczne mapowanie byłoby fałszem co do poprawności. Deklaracje wychodzą dosłownie w klasach [prop:value], dzięki czemu można je przejrzeć bez utraty danych.

Najczęściej zadawane pytania

Które właściwości CSS są rozpoznawane?: Skala spacing dla padding i margin, kolory tekstu i tła, display, wyrównanie flex, rozmiary i wagi czcionek, border-radius, width i height, position oraz gap. Reszta trafia do klasy arbitralnej [prop:value].
Co z wartościami spoza standardowej skali?: Konwerter zwraca notację arbitralną jak p-[13px] albo bg-[#3b82f6]. JIT to kompiluje i klasa pozostaje poprawnym Tailwindem bez ręcznej edycji.
Czy obsługuje zmienne CSS?: Tak. Wartości var(--token) wychodzą w nawiasach kwadratowych. Sama zmienna nadal musi być zadeklarowana w theme tailwind.config lub jako custom property w :root.
Czy konwersja jest bezstratna?: Dla typowych wzorców tak. Animacje, gradienty i nietypowe selektory zostają klasami arbitralnymi — przetrwają, ale czasem warto zatrzymać oryginalny CSS.
Czy można wrócić przez Tailwind-to-CSS?: W większości tak. Proste utility wracają identycznie; wartości arbitralne przetrwają, ale nieobsługiwane deklaracje pozostają w formie arbitralnej również w drodze powrotnej.
Czy coś jest przesyłane?: Nie. Cała konwersja działa w tej karcie przeglądarki; treść arkusza stylów nie opuszcza strony.