Tailwind Helper בודק כל רכיב בדף אינטרנט ומייצר פירוט מקיף ומקוטלג של classes של Tailwind CSS utility תואמות. בשונה ממחרוזת class פשוטה, הוא מארגן את התוצאות לפי קטגוריה — Layout, Spacing, Typography, Colors, Borders ו-Effects — כך שתבין בדיוק מה כל class שולטת בו.
בעוד ש-Copy as Tailwind מעניק לך מחרוזת class מהירה להדבקה, Tailwind Helper הוא הכלי המלווה לעומק. הוא בנוי עבור מפתחים שרוצים להבין את הרכב הסגנון המלא של רכיב במונחים של Tailwind. כל מאפיין CSS מחושב ממופה למקבילתו ב-Tailwind ומקובץ לקטגוריות לוגיות. ניתן לראות במבט אחד שרכיב משתמש ב-flex layout עם יישור items-center, יש לו padding של p-5 עם gap-3 בין children, משתמש ב-text-lg font-bold לטיפוגרפיה, ויש לו מראה של bg-slate-900 rounded-lg border border-slate-700. לחץ על תגית class בודדת להעתקת אותה אחת בלבד, או השתמש ב-"Copy All" לתפיסת המחרוזת המלאה. התצוגה המקוטלגת מקלה על בחירה מדויקת של ה-classes הדרושות במקום להעתיק הכל.
Classes של Tailwind מאורגנות בקטגוריות ברורות: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (font size, weight, color), Colors (background, text, border), Borders (radius, width, style), ו-Effects (shadow, opacity, transform). כל קטגוריה ניתנת לכיווץ ומסומנת בבירור.
לחץ על כל רכיב — כפתורים, כרטיסים, headings, inputs, containers — והפאנל מתמלא מיד בפירוט המלא של classes ב-Tailwind. הרכיב מודגש עם border סגול כך שתדע בדיוק מה נבדק.
כל class של Tailwind מוצגת כתגית לחיצה. לחץ על כל תגית בודדת (כמו p-5 או font-bold) להעתקת אותה class בלבד ללוח. אנימציית "copied" עדינה מאשרת את הפעולה. מושלם כשצריך רק class אחת או שתיים ספציפיות.
הכפתור "Copy All Classes" בתחתית מייצר מחרוזת נקייה מופרדת ברווחים של כל classes ב-Tailwind ומעתיק אותה ללוח. מוכן להדבקה ישירה ל-className="..." או class="...".
כל ערך ממופה ל-scale ברירת המחדל של spacing ו-sizing ב-Tailwind. font של 16px ממופה ל-text-base, padding של 24px ממופה ל-p-6, ו-#7c3aed ממופה ל-purple-600. כשאין התאמה מדויקת, ערך ה-scale הקרוב ביותר נבחר ומצוין.
רחף מעל כל תגית class של Tailwind בפאנל לראות את ערך ה-CSS המחושב המקורי שממנו נוצרה. לדוגמה, ריחוף מעל "p-5" מציג "padding: 20px". תצוגה דו-כיוונית זו עוזרת ללמוד את ה-scale של Tailwind על ידי חיבור classes לערכי CSS אמיתיים.
Tailwind Helper 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:*בשונה ממחרוזת class שטוחה, התצוגה המקוטלגת מאפשרת להבין את הרכב המלא של רכיב. ראה שכרטיס משתמש ב-flex layout, padding ספציפי, טיפוגרפיה מודגשת, רקע slate, borders מעוגלים וצל עדין — כל היבט בסעיף משלו.
בדוק רכיב מעוצב היטב בכל אתר, ואז צור אותו מחדש בפרויקט Tailwind שלך על ידי העתקת classes הקטגוריה הרלוונטיות. קח את ה-layout מרכיב אחד, הטיפוגרפיה מרכיב אחר, והצבעים מ-palette המותג שלך — שלב ועצב.
רחף מעל תגיות class לראות את ערכי מקור ה-CSS. מיפוי אינטראקטיבי זה הוא הדרך המהירה ביותר ללמוד ש-p-4 פירושו 16px, text-lg פירושו 18px, או ש-purple-600 הוא #7c3aed. הפוך כל אתר לתרגיל למידת Tailwind.
בדוק רכיבים באתר הבנוי ב-Tailwind שלך לאימות שימוש עקבי ב-spacing, colors וטיפוגרפיה ממערכת העיצוב. זהה ערכים חד-פעמיים מקריים (כמו p-[13px]) שצריכים להיות ערכי scale סטנדרטיים (p-3 או p-3.5).
השתמש ב-Copy as Tailwind כשצריך מחרוזת class מהירה להדבקה. השתמש ב-Tailwind Helper כשרוצה ללמוד את הפירוט, להעתיק classes בודדות באופן סלקטיבי, או להבין מדוע נבחרו classes ספציפיות של Tailwind לכל מאפיין CSS.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל Tailwind Helper. הכלי מופעל ופאנל מופיע בצד הימני, מוכן להציג פירוט classes.
לחץ על כל רכיב בדף. הוא מודגש עם border סגול, והפאנל מתמלא ב-classes של Tailwind מקוטלגות. כל קטגוריה (Layout, Spacing, Typography, Colors, Borders, Effects) מוצגת כסעיף עם תגיות class.
עיין בקטגוריות להבנת הרכב הסגנון המלא של הרכיב. כל class היא תגית לחיצה — רחף לראות את ערך ה-CSS המקורי, לחץ להעתיק את אותה class בודדת.
לחץ על תגיות בודדות להעתקת classes ספציפיות, או השתמש בכפתור "Copy All Classes" בתחתית לתפיסת הכל כמחרוזת אחת. הדבק ישירות לתוך ה-Tailwind component שלך.
לחץ על רכיב שונה בדף לעדכון מיידי של הפאנל ב-classes חדשות. אין צורך לכבות ולהפעיל מחדש — פשוט המשך ללחוץ לבדיקת מספר רכיבים ברצף.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.