Pomocnik Tailwind sprawdza dowolny element na stronie i generuje kompleksowe, uporządkowane kategorycznie zestawienie pasujących klas użytkowych Tailwind CSS. W przeciwieństwie do prostego ciągu klas, organizuje wyniki według kategorii — Układ, Odstępy, Typografia, Kolory, Ramki i Efekty — więc rozumiesz dokładnie, co kontroluje każda klasa.
Podczas gdy Kopiuj jako Tailwind daje ci szybki ciąg klas do wklejenia, Pomocnik Tailwind to towarzysz głębokiej analizy. Jest zbudowany dla programistów, którzy chcą zrozumieć pełną kompozycję stylów elementu w terminach Tailwind. Każda obliczona właściwość CSS jest mapowana na jej odpowiednik w Tailwind i pogrupowana w logiczne kategorie. Możesz zobaczyć jednym spojrzeniem, że element używa układu flex z wyrównaniem items-center, ma padding p-5 z odstępem gap-3 między dziećmi, używa text-lg font-bold dla typografii i ma bg-slate-900 rounded-lg border border-slate-700. Kliknij dowolną pojedynczą etykietę klasy, aby skopiować tylko tę jedną, lub użyj "Kopiuj wszystko", aby pobrać cały ciąg. Widok skategoryzowany ułatwia wybieranie dokładnie tych klas, których potrzebujesz, zamiast kopiować wszystko.
Klasy Tailwind są uporządkowane w jasne kategorie: Układ (flex, grid, position), Odstępy (padding, margin, gap), Typografia (rozmiar, waga, kolor czcionki), Kolory (tło, tekst, ramka), Ramki (promień, szerokość, styl) i Efekty (cień, przezroczystość, transform). Każda kategoria jest składana i wyraźnie oznaczona.
Kliknij dowolny element — przyciski, karty, nagłówki, pola wejściowe, kontenery — a panel natychmiast wypełni się pełnym zestawieniem klas Tailwind. Element jest podświetlony fioletową ramką, więc dokładnie wiesz, co jest badane.
Każda klasa Tailwind jest wyświetlana jako klikalna etykieta. Kliknij dowolną pojedynczą etykietę (np. p-5 lub font-bold), aby skopiować tylko tę klasę do schowka. Subtelna animacja "skopiowano" potwierdza akcję. Idealne, gdy potrzebujesz tylko jednej lub dwóch konkretnych klas.
Przycisk "Kopiuj wszystkie klasy" u dołu generuje czysty ciąg wszystkich klas Tailwind oddzielonych spacjami i kopiuje go do schowka. Gotowy do wklejenia bezpośrednio do className="..." lub class="...".
Każda wartość jest mapowana na domyślną skalę odstępów i rozmiarów Tailwind. Czcionka 16px mapuje się na text-base, padding 24px na p-6, a #7c3aed na purple-600. Gdy nie ma dokładnego dopasowania, wybierana jest najbliższa wartość skali i jest to odnotowywane.
Najedź na dowolną etykietę klasy Tailwind w panelu, aby zobaczyć oryginalną obliczoną wartość CSS, z której została wygenerowana. Na przykład najechanie na "p-5" pokazuje "padding: 20px". Ten dwukierunkowy widok pomaga uczyć się skali Tailwind poprzez łączenie klas z rzeczywistymi wartościami CSS.
Pomocnik Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*W przeciwieństwie do płaskiego ciągu klas, widok skategoryzowany pozwala zrozumieć kompletną kompozycję elementu. Zobacz, że karta używa układu flex, określonego paddingu, pogrubionej typografii, tła slate, zaokrąglonych ramek i subtelnego cienia — każdy aspekt w osobnej sekcji.
Sprawdź dobrze zaprojektowany element na dowolnej stronie, a następnie odtwórz go w swoim projekcie Tailwind, kopiując odpowiednie klasy kategorii. Weź układ z jednego elementu, typografię z innego i kolory ze swojej palety marki — mieszaj i dopasowuj.
Najedź na etykiety klas, aby zobaczyć źródłowe wartości CSS. To interaktywne mapowanie to najszybszy sposób nauki, że p-4 oznacza 16px, text-lg oznacza 18px, lub że purple-600 to #7c3aed. Zamień dowolną stronę w ćwiczenie nauki Tailwind.
Sprawdź elementy na własnej stronie zbudowanej z Tailwind, aby zweryfikować, czy używają spójnych odstępów, kolorów i typografii z systemu projektowego. Wychwyć przypadkowe wartości jednorazowe (np. p-[13px]), które powinny być standardowymi wartościami skali (p-3 lub p-3.5).
Użyj Kopiuj jako Tailwind, gdy potrzebujesz szybkiego ciągu klas do wklejenia. Użyj Pomocnika Tailwind, gdy chcesz przestudiować zestawienie, kopiować pojedyncze klasy selektywnie lub zrozumieć, dlaczego dla każdej właściwości CSS wybrano konkretne klasy Tailwind.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Pomocnika Tailwind. Narzędzie aktywuje się, a panel pojawia się po prawej stronie, gotowy do wyświetlania zestawień klas.
Kliknij dowolny element na stronie. Zostanie podświetlony fioletową ramką, a panel wypełni się skategoryzowanymi klasami Tailwind. Każda kategoria (Układ, Odstępy, Typografia, Kolory, Ramki, Efekty) jest pokazana jako sekcja z etykietami klas.
Przejrzyj kategorie, aby zrozumieć kompletną kompozycję stylów elementu. Każda klasa jest klikalną etykietą — najedź, aby zobaczyć źródłową wartość CSS, kliknij, aby skopiować tę pojedynczą klasę.
Kliknij pojedyncze etykiety, aby skopiować konkretne klasy, lub użyj przycisku "Kopiuj wszystkie klasy" u dołu, aby pobrać wszystko jako jeden ciąg. Wklej bezpośrednio do swojego komponentu Tailwind.
Kliknij inny element na stronie, aby natychmiast zaktualizować panel nowymi klasami. Nie ma potrzeby dezaktywacji i ponownej aktywacji — po prostu klikaj dalej, aby sprawdzać wiele elementów w kolejności.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.