Kopírovat jako Tailwind překlenuje propast mezi vizuálním návrhem a kódem Tailwind CSS. Klikněte na libovolný prvek na webové stránce a okamžitě získejte ekvivalentní třídy Tailwind utility vygenerované z jeho vypočítaných stylů CSS — připravené k vložení do vašeho JSX, Vue šablony nebo HTML souboru.
Práce s Tailwind CSS znamená přemýšlet v třídách utility místo psaní vlastního CSS. Ale když se odkazujete na existující design — ať už je to vstupní stránka konkurenta, návrhový systém postavený ve vanilla CSS nebo aktuální web klienta — ruční překlad vizuálních stylů na třídy Tailwind je zdlouhavý a náchylný k chybám. Kopírovat jako Tailwind to celé automatizuje. Čte vypočítané styly prohlížeče pro jakýkoli prvek a mapuje každou vlastnost na nejbližší třídu Tailwind utility pomocí výchozí škály. Barvy jsou přiřazeny k nejbližší paletové barvě Tailwind, hodnoty mezery se zaokrouhlují na nejbližší utility na bázi rem a typografie se mapuje na třídy text-* a font-*. Výstupem je čistý řetězec tříd na jednom řádku, který lze vložit přímo do vaší komponenty.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Klikněte na libovolný prvek a jeho úplné vypočítané CSS je analyzováno v reálném čase. Každá použitelná vlastnost je namapována na ekvivalentní třídu Tailwind utility — od bg-purple-600 přes rounded-lg po font-semibold. Převod probíhá okamžitě bez zpoždění načítání nebo zpracování.
Nástroj neprovádí pouze nahrazení řetězců — rozumí systému designu Tailwind. Odsazení 12px se mapuje na p-3 (ne na vlastní hodnotu), barvy jsou přiřazeny k nejbližšímu odstínu v paletě Tailwind (např. #7c3aed se stane purple-600) a velikosti písem se mapují na text-sm, text-base, text-lg atd.
Vygenerovaný řetězec tříd je zobrazen v čistém výstupním panelu. Jedním kliknutím na tlačítko Kopírovat máte celý řetězec ve schránce — připravený k vložení do className="..." v Reactu, class="..." v HTML nebo :class="..." ve Vue.
Pro ještě rychlejší pracovní postup klikněte pravým tlačítkem myši na libovolný prvek na stránce a přistupte k funkci "Kopírovat jako Tailwind" přímo z kontextového menu prohlížeče. Není třeba otevírat dok DevSuite — stačí kliknout pravým tlačítkem a třídy jsou ve schránce.
Přesahuje jednoduché mapování. Zvládá stíny rámečků (shadow-md, shadow-lg), přechody, styly ohraničení, třídy rozvržení flex/grid, hodnoty průhlednosti a dokonce i vlastnosti závislé na responzivitě, jako jsou max-width a poměry stran.
Obsahuje pouze třídy, které se liší od výchozích hodnot prohlížeče — žádné nadbytečné utility. Výstup je stručný a připravený pro produkci, není nafouknutý třídami pro zděděné nebo výchozí hodnoty.
Kopírovat 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-*)transitioncursorPřestavujete web z vanilla CSS nebo Bootstrapu na Tailwind? Klikněte na každou hlavní komponentu na stávajícím webu, zkopírujte třídy Tailwind a použijte je jako výchozí bod pro nové komponenty Tailwind. Ušetří hodiny ruční překladů vlastností na třídy.
Našli jste krásně navrženou kartu, sekci hrdiny nebo navigaci na jiném webu? Klikněte na ni, získejte třídy Tailwind a použijte je jako referenci při budování vlastní verze. Není třeba ručně kontrolovat desítky vlastností CSS.
Při vytváření nových komponent Tailwind z makety Figma nebo PSD implementujte design nejprve v prohlížeči pomocí DevTools, poté klikněte na prvek s funkcí Kopírovat jako Tailwind a získejte přesné třídy utility místo jejich ručního psaní.
Ujistěte se, že ručně zadané hodnoty CSS se skutečně mapují na platné hodnoty škály Tailwind. Pokud jste napsali padding: 14px, nástroj vám ukáže, zda se to zaokrouhlí na p-3 (12px) nebo p-3.5 (14px) — zachytí nesrovnalosti před nasazením.
Jste v Tailwind noví? Klikejte na prvky na libovolné webové stránce a sledujte, jak se tradiční vlastnosti CSS překládají na třídy utility. Je to interaktivní způsob, jak se naučit systém pojmenování tříd Tailwind na reálných příkladech.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Kopírovat jako Tailwind. Nástroj se aktivuje a váš kurzor se změní na zaměřovač, což signalizuje, že nyní můžete klikat na prvky.
Klikněte na libovolný prvek na stránce — tlačítko, kartu, nadpis, navigační lištu. Prvek se zvýrazní a jeho vypočítané CSS se analyzuje. Zobrazí se plovoucí panel s vygenerovaným řetězcem tříd Tailwind.
Panel zobrazuje úplný řetězec tříd Tailwind rozdělený do logických skupin. Přesně vidíte, která vlastnost CSS se namapovala na kterou třídu Tailwind. Najetím na libovolnou třídu zobrazíte základní hodnotu CSS, kterou reprezentuje.
Kliknutím na tlačítko "Kopírovat" přenesete úplný řetězec tříd. Vložte ho přímo do className vaší komponenty, atributu class nebo šablony. Třídy fungují okamžitě se standardním nastavením Tailwind.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.