A Másolás Tailwind-ként funkció a leggyorsabb módja annak, hogy stílusokat emeljen át bármely weboldalról a saját projektjébe. Felejtse el a CSS tulajdonságok kézi konvertálását utility osztályokká — ez az eszköz elvégzi Ön helyett, beleértve a színeket, tipográfiát, térközöket és elrendezéseket.
Bármilyen webes elem stílusának visszafejtése időigényes folyamat. Általában meg kell nyitni a DevTools-t, megkeresni a számított stílusokat, majd manuálisan kitalálni a megfelelő Tailwind osztályokat. A Másolás Tailwind-ként ezt egyetlen kattintássá egyszerűsíti. Intelligens algoritmusunk beolvassa az elem számított stílusait, és leképezi azokat a legközelebbi Tailwind utility osztályokra a standard konfiguráció alapján. Kezeli az összetett tulajdonságokat is, mint a grid elrendezések, flexbox beállítások, sőt még az egyedi értékeket is támogatja az 'arbitrary value' szintaktikával (pl. w-[123px]), ha nem található pontos egyezés.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Válasszon ki bármilyen elemet az oldalon, és azonnal kapjon egy tiszta Tailwind osztálylistát. Nincs szükség várakozásra vagy bonyolult beállításokra — a kód azonnal készen áll a beillesztésre.
Az eszköz felismeri az RGB/HEX színeket, és automatikusan leképezi őket a legközelebbi Tailwind színpalettára (pl. bg-blue-500). Ha a szín egyedi, automatikusan generálja a megfelelő tetszőleges értékű osztályt.
A betűméretek, súlyok, sorstílusok és betűcsaládok automatikusan Tailwind osztályokká (text-lg, font-bold stb.) alakulnak, megőrizve az eredeti dizájn minden apró részletét.
A padding, margin, szélesség és magasság értékek automatikusan leképeződnek a Tailwind skálájára. A Flexbox és Grid beállítások szintén támogatottak, így az összetett konténereket is könnyedén lemásolhatja.
Olyan stílusoknál, amelyek nem illeszkednek a standard Tailwind skálába, az eszköz a modern [ ] szintaktikát használja, biztosítva, hogy a másolt stílus 100%-ban megegyezzen az eredetivel.
Választhat, hogy csak az osztálylistát másolja ki, vagy a teljes HTML elemet az összes generált Tailwind osztállyal együtt, így azonnal beillesztheti a React, Vue vagy HTML projektjébe.
Másolás Tailwind-ként 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-*)transitioncursorLátott egy szép gombot vagy kártyát egy weboldalon? Ne próbálja meg nulláról újraírni Tailwind-ben. Másolja ki a stílusait Tailwind osztályokká, és illessze be a saját prototípusába másodpercek alatt.
Egy régi, hagyományos CSS-t használó projektet alakít át Tailwind-re? Használja ezt az eszközt az elemek stílusának gyors kinyeréséhez és utility osztályokká alakításához a kézi munka töredéke alatt.
Vizsgálja meg, hogyan épülnek fel a professzionális oldalak. A Tailwind-é való konvertálás segít megérteni a térközök és színek közötti összefüggéseket egy ismerős utility-first szemüvegen keresztül.
Kattintson az elemekre különböző képernyőméreteken, hogy gyorsan megkapja a szükséges Tailwind osztályokat az asztali és mobil nézetekhez egyaránt.
Kezdő Tailwind használó? Nézze meg, hogyan festene egy bonyolult egyedi CSS stílus Tailwind osztályokkal leírva. Ez a legjobb módja a framework logikájának elsajátításának.
Aktiválja a DevSuite Pro kiválasztó eszközét, és kattintson bármelyik elemre a weboldalon, amelynek a stílusát Tailwind-ként szeretné megkapni.
A felugró menüben vagy a lebegő dokkban kattintson a 'Másolás Tailwind-ként' gombra. Az eszköz ekkor elvégzi a stílusok elemzését és konvertálását.
Megjelenik egy előnézeti ablak a generált osztályokkal. Itt gyorsan átfuthatja, hogy minden stílus (színek, méretek) helyesen lett-e leképezve.
Kattintson a 'Másolás a vágólapra' gombra. Választhat, hogy csak az osztályokat (class string) vagy a teljes HTML tageket szeretné másolni.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.