הסיבה האמיתית לכך שכולם מתווכחים על Tailwind CSS v4

הוויכוח על Tailwind CSS v4 נמצא בכל מקום. רוב האנשים מתווכחים על הדבר הלא נכון.

השאלה האמיתית אינה לגבי utility classes לעומת inline styles. היא לגבי איפה העיצוב שלכם נמצא ומי משלם את המחיר המנטלי.

Tailwind v4 מעביר את הקונפיגורציה לקובץ ה-CSS שלכם. אתם משתמשים ב-@theme במקום בקובץ קונפיגורציה של JavaScript. זה הופך את תהליכי העבודה לנקיים יותר.

אבל זה לא הסיבה לדרמה. הדרמה נובעת מהאופן שבו v4 הופך שני דפוסים שונים לקלים יותר לשימוש.

דפוס 1: Utility classes בתוך הקומפוננטות שלכם. אתם כותבים קלאסים ישירות ב-HTML או ב-JSX שלכם. זה אומר לכם בדיוק איך אלמנט נראה.

דפוס 2: גישת ה-@apply. אתם יוצרים semantic classes כמו .alert או .alert--error בקובץ CSS. זה אומר לכם מה האלמנט הוא.

שתי הדרכים עובדות. אף אחת מהן לא שגויה. הן פועלות לפי פילוסופיות שונות.

קבוצה א' מאמינה ב-co-location. הכל נשאר במקום אחד. קבוצה ב' מאמינה בשמות סמנטיים. הם רוצים שמות שמתארים את המטרה.

כשמעצב משנה צבע של שגיאה מאדום לכתום, קבוצה א' מחפשת בקובצי הקוד. קבוצה ב' משנה שורה אחת בקובץ CSS.

Tailwind v4 גורם ל-@apply להרגיש טבעי יותר. זה מחזק את המתח.

כך תוכלו לבחור בהתאם לגודל הצוות שלכם:

  • צוותים קטנים: השתמשו ב-utility classes. אתם לא צריכים לבזבז זמן על מתן שמות לקלאסים. אתם נעים מהר יותר כשכולם עובדים על אותם קבצים.

  • ספריות קומפוננטות: השתמשו ב-@apply או ב-CSS variables. המשתמשים שלכם לא צריכים להכיר את ה-design tokens הפנימיים שלכם.

  • חברות גדולות: השתמשו במודל היברידי. תנו לצוות ה-design system להיות אחראי על ה-semantic classes. תנו למפתחי האפליקציה להשתמש ב-utilities עבור פריסות (layouts) מהירות.

אל תשתמשו ב-@apply רק כדי להימנע מקריאת מחרוזות קלאסים ארוכות. זו לא אסטרטגיה. זו הימנעות.

המבקרים הקולניים ביותר לעיתים קרובות נלחמים בכלים שלהם במקום בפריימוורק. אם לעורך שלכם חסר IntelliSense או שלצוות שלכם חסרה מערכת design tokens, תהליך העבודה ירגיש שבור.

תקנו את תהליך העבודה שלכם לפני שאתם מאשימים את הפריימוורק.

Tailwind v4 הוא גרסה חזקה. ה-CSS-first config טוב יותר. הוויכוח הוא רק סימן לכך שצוותים צריכים לקבל החלטות ברורות.

קחו החלטה. תיעדו אותה. המשיכו הלאה.

מה הגישה של הצוות שלכם? אתם משתמשים ב-utility classes או ב-@apply?

מקור: https://dev.to/enjoy_kumawat/the-real-reason-everyones-fighting-about-tailwind-css-v4-4o0g