A Tailwind Segéd megvizsgálja az oldal bármely elemét, és átfogó, kategorizált áttekintést készít az illeszkedő Tailwind CSS segédosztályokról. Egy egyszerű osztálykarakterlánccal ellentétben kategóriák szerint rendezi az eredményeket — Elrendezés, Térköz, Tipográfia, Színek, Keretek és Effektek — így pontosan megérti, mit vezérel az egyes osztályok.
Míg a Másolás Tailwind-ként egy gyors osztálykarakterláncat ad a beillesztéshez, a Tailwind Segéd a mélyreható kísérőeszköz. Azoknak a fejlesztőknek készült, akik Tailwind szakkifejezésekkel szeretnék megérteni egy elem teljes stílusösszetételét. Minden számított CSS tulajdonság Tailwind megfelelőjére van leképezve és logikai kategóriákba csoportosítva. Egyetlen pillantással láthatja, hogy egy elem flex elrendezést használ items-center igazítással, p-5 belső margóval rendelkezik és gap-3 köze van a gyermekek között, text-lg font-bold típográfiát alkalmaz, és bg-slate-900 rounded-lg border border-slate-700 megjelenéssel bír. Kattintson bármelyik egyedi osztálycímkére, hogy csak azt másolja, vagy használja a "Mindent másol" gombot a teljes karakterlánc megszerzéséhez. A kategorizált nézet megkönnyíti a pontosan szükséges osztályok kiválasztását az összes másolása helyett.
A Tailwind osztályok világos kategóriákba vannak rendezve: Elrendezés (flex, grid, position), Térköz (padding, margin, gap), Tipográfia (betűméret, vastagság, szín), Színek (háttér, szöveg, keret), Keretek (radius, szélesség, stílus) és Effektek (shadow, opacity, transform). Minden kategória összecsukható és egyértelműen felcímkézett.
Kattintson bármely elemre — gombokra, kártyákra, fejlécekre, beviteli mezőkre, tárolókra — és a panel azonnal feltöltődik a teljes Tailwind osztály-áttekintéssel. Az elem lila kerettel van kiemelve, így pontosan tudja, mi kerül ellenőrzésre.
Minden Tailwind osztály kattintható címkeként jelenik meg. Kattintson bármely egyedi címkére (pl. p-5 vagy font-bold), hogy csak azt az osztályt másolja a vágólapra. Egy finom "másolva" animáció visszajelzést ad. Tökéletes, ha csak egy-két konkrét osztályra van szüksége.
Az alul található "Összes osztály másolása" gomb tiszta, szóközzel elválasztott karakterláncot állít össze az összes Tailwind osztályból és a vágólapra másolja. Közvetlenül beilleszthető a className="..." vagy class="..." attribútumba.
Minden érték a Tailwind alapértelmezett térköz- és méretezési skálájára van leképezve. Egy 16px-es betűméret a text-base osztályhoz, 24px-es belső margó a p-6 osztályhoz, és a #7c3aed a purple-600 osztályhoz van rendelve. Ha pontos egyezés nem létezik, a legközelebbi skálaérték kerül kiválasztásra és jelölésre.
Vigye a kurzort a panel bármely Tailwind osztálycímkéje fölé, hogy lássa azt az eredeti számított CSS értéket, amelyből az létrejött. Például a "p-5" fölé mutatva megjelenik a "padding: 20px". Ez a kétirányú nézet segít megtanulni a Tailwind skálát az osztályok és a valódi CSS értékek összekapcsolásával.
Tailwind Segéd 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:*Egy sima osztálykaracterlánchoz képest a kategorizált nézet lehetővé teszi egy elem teljes összetételének megértését. Láthatja, hogy egy kártya flex elrendezést, konkrét belső margókat, félkövér tipográfiát, palaszürke hátteret, lekerekített kereteket és finom árnyékot használ — minden szempont saját szekcióban.
Ellenőrizze egy jól megtervezett elemet bármely weboldalon, majd hozza létre Tailwind projektjében a releváns kategória-osztályok másolásával. Vegye az elrendezést az egyik elemből, a tipográfiát a másikból, és a színeket a márkapalettájából — kombináljon és párosítson.
Vigye a kurzort az osztálycímkék fölé a CSS forrásértékek megtekintéséhez. Ez az interaktív leképezés a leggyorsabb módja annak megtanulásához, hogy a p-4 16px-t, a text-lg 18px-t jelent, vagy hogy a purple-600 a #7c3aed. Bármely weboldalt Tailwind tanulási gyakorlattá alakíthat.
Ellenőrizze saját, Tailwind-del épített webhelye elemeit, hogy megbizonyosodjon arról, következetes térközöket, színeket és tipográfiát használnak-e a dizájnrendszerből. Fedezze fel a véletlen egyedi értékeket (pl. p-[13px]), amelyeknek standard skálaértékeknek kellene lenniük (p-3 vagy p-3.5).
Használja a Másolás Tailwind-ként funkciót, ha gyors osztálykarakterlánca szükséges beillesztéshez. Használja a Tailwind Segédet, ha tanulmányozni szeretné az áttekintést, szelektíven másolna egyedi osztályokat, vagy meg szeretné érteni, miért kerültek kiválasztásra az adott Tailwind osztályok az egyes CSS tulajdonságokhoz.
Nyissa meg a DevSuite Pro lebegő dokkolót, és kattintson a Tailwind Segéd ikonra. Az eszköz aktiválódik, és egy panel jelenik meg a jobb oldalon, készen az osztály-áttekintések megjelenítésére.
Kattintson az oldal bármely elemére. Lila kerettel lesz kiemelve, és a panel feltöltődik a kategorizált Tailwind osztályokkal. Minden kategória (Elrendezés, Térköz, Tipográfia, Színek, Keretek, Effektek) egy szekciót alkot osztálycímkékkel.
Böngésszen a kategóriák között az elem teljes stílusösszetételének megértéséhez. Minden osztály egy kattintható címke — vigye fölé a kurzort a CSS forrásérték megtekintéséhez, kattintson rá az adott osztály másolásához.
Kattintson az egyedi címkékre adott osztályok másolásához, vagy használja az alul található "Összes osztály másolása" gombot, hogy mindent egyetlen karakterláncként másoljon. Illessze be közvetlenül Tailwind komponensébe.
Kattintson az oldal egy másik elemére, hogy azonnal frissítse a panelt az új osztályokkal. Nem szükséges deaktiválni és újraaktiválni — csak folytassa a kattintásokat több elem sorban történő ellenőrzéséhez.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.