Kopiuj jako Tailwind łączy projektowanie wizualne z kodem Tailwind CSS. Kliknij dowolny element na stronie i natychmiast otrzymaj równoważne klasy użytkowe Tailwind wygenerowane z jego obliczonych stylów CSS — gotowe do wklejenia w pliku JSX, szablonie Vue lub HTML.
Budowanie z Tailwind CSS oznacza myślenie w kategoriach klas użytkowych zamiast pisania niestandardowego CSS. Ale gdy odwołujesz się do istniejącego projektu — czy to landing page konkurencji, system projektowy zbudowany w zwykłym CSS, czy obecna strona klienta — ręczne tłumaczenie stylów wizualnych na klasy Tailwind jest żmudne i podatne na błędy. Kopiuj jako Tailwind automatyzuje to całkowicie. Odczytuje obliczone style przeglądarki dla dowolnego elementu i mapuje każdą właściwość na najbliższą klasę użytkową Tailwind przy użyciu domyślnej skali. Kolory są dopasowywane do najbliższego koloru palety Tailwind, wartości odstępów przyciągają do najbliższego narzędzia opartego na rem, a typografia mapuje na klasy text-* i font-*. Wynikiem jest czysty, jednoliniowy ciąg klas, który możesz wkleić bezpośrednio do swojego komponentu.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Kliknij dowolny element, a jego pełne obliczone CSS zostanie przeanalizowane w czasie rzeczywistym. Każda stosowna właściwość jest mapowana na równoważną klasę użytkową Tailwind — od bg-purple-600 przez rounded-lg po font-semibold. Konwersja następuje natychmiast, bez ładowania ani opóźnień.
Narzędzie nie wykonuje tylko prostej zamiany tekstu — rozumie system projektowy Tailwind. Padding 12px mapuje się na p-3 (nie na wartość niestandardową), kolory są dopasowywane do najbliższego odcienia palety Tailwind (np. #7c3aed staje się purple-600), a rozmiary czcionek mapują się na text-sm, text-base, text-lg itd.
Wygenerowany ciąg klas jest wyświetlany w czystym panelu wyjściowym. Kliknij przycisk Kopiuj raz, a cały ciąg znajdzie się w schowku — gotowy do wklejenia do className="..." w Reakcie, class="..." w HTML lub :class="..." w Vue.
Dla jeszcze szybszej pracy, kliknij prawym przyciskiem dowolny element na stronie, aby uzyskać dostęp do "Kopiuj jako Tailwind" bezpośrednio z menu kontekstowego przeglądarki. Nie ma potrzeby otwierania doka DevSuite — po prostu kliknij prawym, wybierz opcję i klasy są w schowku.
Wykracza poza proste mapowania. Obsługuje cienie ramek (shadow-md, shadow-lg), gradienty, style ramek, klasy układu flex/grid, wartości przezroczystości, a nawet właściwości responsywne, takie jak max-width i współczynniki proporcji.
Zawiera tylko klasy różniące się od domyślnych wartości przeglądarki — bez zbędnych narzędzi. Wynik jest zwięzły i gotowy do produkcji, nie jest przeładowany klasami dla dziedziczonych lub domyślnych wartości.
Kopiuj jako Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorPrzebudowujesz witrynę z czystego CSS lub Bootstrapa na Tailwind? Kliknij każdy główny komponent istniejącej strony, skopiuj klasy Tailwind i użyj ich jako punktu wyjścia dla nowych komponentów Tailwind. Oszczędza godziny ręcznego tłumaczenia właściwości na klasy.
Znalazłeś pięknie zaprojektowaną kartę, sekcję hero lub nawigację na innej stronie? Kliknij ją, uzyskaj klasy Tailwind i użyj ich jako odniesienia do zbudowania własnej wersji. Nie trzeba ręcznie sprawdzać dziesiątek właściwości CSS.
Podczas budowania nowych komponentów Tailwind z makiety Figma lub PSD, zaimplementuj projekt najpierw w przeglądarce za pomocą DevTools, a następnie kliknij element z Kopiuj jako Tailwind, aby uzyskać dokładne klasy użytkowe zamiast pisać je ręcznie.
Upewnij się, że twoje ręcznie napisane wartości CSS faktycznie mapują się na prawidłowe wartości skali Tailwind. Jeśli napisałeś padding: 14px, narzędzie pokaże, czy zaokrągla to do p-3 (12px) czy p-3.5 (14px) — wychwytując niespójności, zanim trafią na produkcję.
Nowy w Tailwind? Kliknij elementy na dowolnej stronie, aby zobaczyć, jak tradycyjne właściwości CSS tłumaczą się na klasy użytkowe. To interaktywny sposób nauki systemu nazewnictwa klas Tailwind poprzez oglądanie rzeczywistych przykładów.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Kopiuj jako Tailwind. Narzędzie aktywuje się, a kursor zmienia się w celownik, wskazując, że możesz teraz klikać elementy.
Kliknij dowolny element na stronie — przycisk, kartę, nagłówek, pasek nawigacyjny. Element zostanie podświetlony, a jego obliczone CSS przeanalizowane. Pojawi się pływający panel pokazujący wygenerowany ciąg klas Tailwind.
Panel pokazuje pełny ciąg klas Tailwind podzielony na logiczne grupy. Możesz zobaczyć dokładnie, która właściwość CSS została zmapowana na którą klasę Tailwind. Najedź na dowolną klasę, aby zobaczyć wartość CSS, którą reprezentuje.
Kliknij przycisk "Kopiuj", aby pobrać kompletny ciąg klas. Wklej go bezpośrednio do atrybutu className, class lub szablonu komponentu. Klasy działają natychmiast ze standardową konfiguracją Tailwind.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.