Copy as Tailwind

בנייה עם Tailwind CSS משמעה חשיבה ב-utility classes במקום כתיבת CSS מותאם אישית. אך כאשר אתה מפנה לעיצוב קיים — בין אם זה דף נחיתה של מתחרה, מערכת עיצוב בנויה ב-vanilla CSS, או האתר הנוכחי של לקוח — תרגום סגנונות ויזואליים ל-Tailwind classes ידנית הוא מייגע ונוטה לשגיאות. Copy as Tailwind מבצע אוטומציה מלאה של זה. הוא קורא את הסגנונות המחושבים של הדפדפן לכל אלמנט וממפה כל מאפיין ל-Tailwind utility class הקרוב ביותר תוך שימוש בסקאלה הברירת מחדל. צבעים מותאמים לצבע הקרוב ביותר בפלטת Tailwind, ערכי spacing נצמדים ל-utility הקרובה ביותר מבוססת rem, ו-typography ממפה לקלאסים text-* ו-font-*. הפלט הוא מחרוזת class נקייה של שורה אחת שאפשר להדביק ישירות לקומפוננטה שלך.

תכונות מפתח

המרה מיידית CSS-ל-Tailwind

לחץ על כל אלמנט וה-CSS המחושב המלא שלו מנותח בזמן אמת. כל מאפיין ישים ממופה ל-Tailwind utility class המקבילה — מ-bg-purple-600 דרך rounded-lg ועד font-semibold. ההמרה מתרחשת מיידית ללא עיכוב טעינה או עיבוד.

מיפוי קלאסים חכם

הכלי לא רק מבצע החלפת מחרוזות — הוא מבין את מערכת העיצוב של Tailwind. padding של 12px ממופה ל-p-3 (לא לערך מותאם אישית), צבעים מותאמים לגוון הקרוב ביותר בפלטת Tailwind (למשל, #7c3aed הופך ל-purple-600), וגדלי font ממופים ל-text-sm, text-base, text-lg וכו'.

העתקה לקליפבורד בלחיצה אחת

מחרוזת הקלאסים שנוצרה מוצגת בלוח פלט נקי. לחץ על כפתור Copy פעם אחת והמחרוזת כולה נמצאת בקליפבורד שלך — מוכנה להדבקה ב-className="..." ב-React, class="..." ב-HTML, או :class="..." ב-Vue.

שילוב תפריט הקשר

לזרימת עבודה מהירה עוד יותר, לחץ לחיצה ימנית על כל אלמנט בדף לגישה ל-"Copy as Tailwind" ישירות מתפריט ההקשר של הדפדפן. אין צורך לפתוח את dock של DevSuite — פשוט לחץ לחיצה ימנית, לחץ, והקלאסים נמצאים בקליפבורד שלך.

מטפל במאפיינים מורכבים

חורג ממיפויים פשוטים. מטפל ב-box shadows (shadow-md, shadow-lg), gradients, סגנונות border, קלאסי flex/grid layout, ערכי opacity, ואפילו מאפיינים המודעים לרספונסיביות כמו max-width ויחסי aspect.

פלט נקי ומינימלי

כולל רק קלאסים שונים מברירות המחדל של הדפדפן — ללא utilities מיותרות. הפלט תמציתי ומוכן לייצור, לא מנופח עם קלאסים עבור ערכים עוברים בירושה או ברירת מחדל.

מה ניתן לבדוק

Copy as Tailwind covers the following, organized by category:

Layout

display (flex, grid, block)
position (relative, absolute)
flex-direction
justify-content
align-items
gap
overflow

Spacing

padding (p-*)
margin (m-*)
width (w-*)
height (h-*)
max-width
min-height

Typography

font-size (text-*)
font-weight (font-*)
line-height (leading-*)
letter-spacing (tracking-*)
text-align
text-transform

Colors

color (text-*)
background-color (bg-*)
border-color (border-*)
opacity

Borders

border-width (border-*)
border-radius (rounded-*)
border-style

Effects

box-shadow (shadow-*)
transform (scale-*, rotate-*)
transition
cursor

מקרי שימוש נפוצים

מיגרציה של אתר קיים ל-Tailwind

בונה מחדש אתר מ-vanilla CSS או Bootstrap ל-Tailwind? לחץ על כל רכיב מרכזי באתר הקיים, העתק את קלאסי Tailwind, והשתמש בהם כנקודת מוצא לרכיבי Tailwind החדשים שלך. חוסך שעות של תרגום ידני מאפיין-לקלאס.

הנדסה לאחור של תבניות עיצוב

מצאת כרטיס מעוצב יפה, קטע hero, או ניווט באתר אחר? לחץ עליו, קבל את קלאסי Tailwind, והשתמש בהם כהפניה לבניית הגרסה שלך. אין צורך לבדוק ידנית עשרות מאפייני CSS.

האצת פיתוח קומפוננטות

בעת בניית רכיבי Tailwind חדשים ממוקאפ Figma או PSD, יישם את העיצוב בדפדפן תחילה באמצעות DevTools, ואז לחץ על האלמנט עם Copy as Tailwind כדי לקבל את utility classes המדויקות במקום לכתוב אותן ביד.

תרגום עקבי של Design Tokens

ודא שערכי ה-CSS הכתובים ביד שלך ממופים בפועל לערכי סקאלת Tailwind תקניים. אם כתבת padding: 14px, הכלי מראה לך אם זה מעוגל ל-p-3 (12px) או p-3.5 (14px) — תופס חוסר עקביות לפני שהם יוצאים לפרודקשן.

הוראה ולמידת Tailwind

חדש ל-Tailwind? לחץ על אלמנטים בכל דף אינטרנט כדי לראות כיצד מאפייני CSS מסורתיים מתורגמים ל-utility classes. זוהי דרך אינטראקטיבית ללמוד את מערכת שמות קלאסי Tailwind על ידי ראיית דוגמאות אמיתיות.

איך להשתמש

הפעל את Copy as Tailwind

פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון Copy as Tailwind. הכלי מופעל והסמן שלך משתנה לבוחר crosshair, המציין שכעת תוכל ללחוץ על אלמנטים.

לחץ על האלמנט המטרה

לחץ על כל אלמנט בדף — כפתור, כרטיס, כותרת, סרגל ניווט. האלמנט מסומן וה-CSS המחושב שלו מנותח. לוח צף מופיע ומציג את מחרוזת קלאסי Tailwind שנוצרה.

סקור את הקלאסים שנוצרו

הלוח מציג את מחרוזת קלאסי Tailwind המלאה מחולקת לקבוצות לוגיות. ניתן לראות בדיוק איזה מאפיין CSS ממופה לאיזה Tailwind class. רחף מעל כל קלאס לראות את ערך ה-CSS הבסיסי שהוא מייצג.

העתק והדבק לקוד שלך

לחץ על כפתור "Copy" כדי לתפוס את מחרוזת הקלאסים המלאה. הדבק ישירות ל-className, מאפיין class, או תבנית של הקומפוננטה שלך. הקלאסים עובדים מיידית עם הגדרת Tailwind סטנדרטית.