ממיר CSS ל-Tailwind

הדביקו CSS קיים וקבלו נקודת התחלה של utility classes למיגרציה, ניקוי או שכתוב מהיר ב-Tailwind.

קלט CSS

.card {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
}

פלט מומר

פלט שהומר יופיע כאן.

למה להשתמש בממיר CSS ל-Tailwind?

העבירו CSS ישן לתהליך Tailwind מהר יותר על ידי הפיכת הצהרות מוכרות ל-utility classes במקום לתרגם כל שורה ביד.

שמרו ערכים לא שכיחים עם התחביר השרירותי של Tailwind כאשר utility class סטנדרטי לא קיים.

השתמשו בפלט כטיוטת מיגרציה, ואז פשטו ערכים חוזרים ל-tokens, רכיבים, variants או דפוסי classes לשימוש חוזר.

displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity

Selectors מורכבים כמו :hover, ::before או media queries עדיין עשויים להזדקק לניקוי ידני אחרי ההמרה.

לא. המרה אוטומטית היא נקודת התחלה. Selectors מורכבים, כללים רספונסיביים, pseudo-elements, cascade וסמנטיקה של רכיבים עדיין צריכים סקירה אנושית.

כן. הכלי עוטף הצהרות עצמאיות באופן זמני כך שהממיר עדיין יוכל לעבד אותן.

אם ערך חוזר בממשק, שקלו להפוך אותו ל-theme token, class של רכיב או primitive של design system במקום להשאיר הרבה utilities חד-פעמיים.

אפשר לתרגם כמה הצהרות פשוטות, אבל גרסאות רספונסיביות, hover states, pseudo-elements ו-selectors מקוננים צריכים לרוב ניקוי ידני אחרי ההמרה.