Pomocník Tailwind prověřuje libovolný prvek na webové stránce a generuje komplexní, kategorizovaný přehled odpovídajících tříd CSS utility Tailwind. Na rozdíl od jednoduchého řetězce tříd organizuje výsledky podle kategorií — Rozvržení, Mezery, Typografie, Barvy, Ohraničení a Efekty — takže přesně rozumíte, co každá třída ovládá.
Zatímco Kopírovat jako Tailwind vám dává rychlý řetězec tříd k vložení, Pomocník Tailwind je kompanion pro hloubkovou analýzu. Je určen pro vývojáře, kteří chtějí porozumět úplnému složení stylů prvku v pojmech Tailwind. Každá vypočítaná vlastnost CSS je namapována na svůj ekvivalent v Tailwind a seskupena do logických kategorií. Na první pohled vidíte, že prvek používá flex rozvržení se zarovnáním items-center, má odsazení p-5 s gap-3 mezi podřízenými prvky, používá typografii text-lg font-bold a má vzhled bg-slate-900 rounded-lg border border-slate-700. Kliknutím na libovolný štítek třídy zkopírujete pouze tu jednu, nebo použijte tlačítko "Kopírovat vše" pro získání úplného řetězce. Kategorizované zobrazení usnadňuje výběr přesně těch tříd, které potřebujete, místo kopírování všeho.
Třídy Tailwind jsou uspořádány do přehledných kategorií: Rozvržení (flex, grid, position), Mezery (padding, margin, gap), Typografie (velikost písma, tloušťka, barva), Barvy (pozadí, text, ohraničení), Ohraničení (rádius, šířka, styl) a Efekty (stín, průhlednost, transformace). Každá kategorie je sbalitelná a jasně označená.
Klikněte na libovolný prvek — tlačítka, karty, nadpisy, vstupy, kontejnery — a panel se okamžitě naplní úplným přehledem tříd Tailwind. Prvek je zvýrazněn fialovým ohraničením, takže přesně víte, co je inspektováno.
Každá třída Tailwind je zobrazena jako klikatelný štítek. Kliknutím na libovolný štítek (jako p-5 nebo font-bold) zkopírujete pouze tuto třídu do schránky. Jemná animace "zkopírováno" potvrdí akci. Ideální, když potřebujete jen jednu nebo dvě konkrétní třídy.
Tlačítko "Kopírovat všechny třídy" v dolní části generuje čistý řetězec všech tříd Tailwind oddělených mezerami a zkopíruje ho do schránky. Připraveno k přímému vložení do className="..." nebo class="...".
Každá hodnota je namapována na výchozí škálu mezer a velikostí Tailwind. Písmo 16px se mapuje na text-base, odsazení 24px na p-6 a #7c3aed na purple-600. Pokud přesná shoda neexistuje, zvolí se nejbližší hodnota škály s poznámkou.
Najeďte myší na libovolný štítek třídy Tailwind v panelu a zobrazí se původní vypočítaná hodnota CSS, ze které byla vygenerována. Například najetí na "p-5" zobrazí "padding: 20px". Tento obousměrný pohled pomáhá naučit se škálu Tailwind propojením tříd se skutečnými hodnotami CSS.
Pomocník 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:*Na rozdíl od plochého řetězce tříd umožňuje kategorizované zobrazení pochopit úplné složení prvku. Uvidíte, že karta používá flex rozvržení, konkrétní odsazení, tučnou typografii, pozadí slate, zaoblené ohraničení a jemný stín — každý aspekt ve své vlastní sekci.
Prozkoumejte dobře navržený prvek na libovolném webu a poté ho znovu vytvořte ve svém Tailwind projektu zkopírováním příslušných tříd z kategorií. Vezměte rozvržení z jednoho prvku, typografii z jiného a barvy z vaší brandové palety — mixujte a kombinujte.
Najeďte myší na štítky tříd a zobrazí se zdrojové hodnoty CSS. Toto interaktivní mapování je nejrychlejší způsob, jak se naučit, že p-4 znamená 16px, text-lg znamená 18px nebo že purple-600 je #7c3aed. Přeměňte jakýkoli web na cvičení pro učení Tailwind.
Prozkoumejte prvky vlastního webu postaveného v Tailwind a ověřte, že používají konzistentní mezery, barvy a typografii z návrhového systému. Odhalte náhodné jednorázové hodnoty (jako p-[13px]), které by měly být standardní hodnotou škály (p-3 nebo p-3.5).
Použijte Kopírovat jako Tailwind, když potřebujete rychlý řetězec tříd k vložení. Použijte Pomocníka Tailwind, když chcete prostudovat přehled, selektivně kopírovat jednotlivé třídy nebo pochopit, proč byly pro každou vlastnost CSS vybrány konkrétní třídy Tailwind.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Pomocníka Tailwind. Nástroj se aktivuje a na pravé straně se zobrazí panel připravený k zobrazení přehledů tříd.
Klikněte na libovolný prvek na stránce. Zvýrazní se fialovým ohraničením a panel se naplní kategorizovanými třídami Tailwind. Každá kategorie (Rozvržení, Mezery, Typografie, Barvy, Ohraničení, Efekty) je zobrazena jako sekce se štítky tříd.
Procházejte kategorie a pochopte úplné složení stylů prvku. Každá třída je klikatelný štítek — najeďte myší pro zobrazení zdrojové hodnoty CSS, kliknutím zkopírujete danou třídu.
Kliknutím na jednotlivé štítky zkopírujte konkrétní třídy nebo použijte tlačítko "Kopírovat všechny třídy" v dolní části pro získání všeho jako jednoho řetězce. Vložte přímo do Tailwind komponenty.
Klikněte na jiný prvek na stránce a okamžitě aktualizujte panel novými třídami. Není třeba deaktivovat a znovu aktivovat — stačí pokračovat v klikání pro sekvenční inspekci více prvků.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.