טיילווינד סי אס אס הוא כנראה ספריית ה CSS הטרנדית ביותר כיום. אפשר לחשוב עליו כתגובת נגד לספריות כמו Antd ולדומיננטיות של JavaScript Frameworks: בגישה של antd אתה ממילא הולך להשתמש בפריימוורק אז הנה ספריית קונפוננטות שתתאים לכל פריימוורק שתבחר; בגישה של טיילווינד הנה דרך לכתוב CSS מודרני בלי JavaScript ולשתף את העבודה עם אחרים.

אבל התיאוריה הזאת מקבלת ב Tailwind מימוש די מוזר שמתבסס על Utility Classes. זה אומר שבמקום ספריית קומפוננטות שנותנת קלאס ל"גלריית תמונות", קלאס ל"טבלה" וקלאס ל"כרטיס", אנחנו מקבלים בטיילוינד קלאס ל-"ריפוד של 32 פיקסלים" או קלאס ל"צבע רקע אפור". אם לא ראיתם אף פעם קוד HTML שמשתמש בטיילוינד הנה דוגמה לאחד, רק שימו לב לקחת אוויר לפני שקוראים:

<div class="relative flex pb-5 space-x-5 border-b border-gray-200 lg:space-x-3 xl:space-x-5">
    <svg class="w-16 h-16 text-green-400 rounded-2xl" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect x="0" y="0" width="150" height="150" rx="15"></rect></defs><g fill="none" fill-rule="evenodd"><mask fill="#fff"><use xlink:href="#plan1"></use></mask><use fill="currentColor" xlink:href="#plan1"></use><circle fill-opacity=".3" fill="#FFF" mask="url(#plan1)" cx="125" cy="25" r="50"></circle><path fill-opacity=".3" fill="#FFF" mask="url(#plan1)" d="M-33 83H67v100H-33z"></path></g></svg>
    <div class="relative flex flex-col items-start">
        <h3 class="text-xl font-bold">Basic Plan</h3>
        <p class="tracking-tight text-gray-500">
            <span class="text-sm transform inline-block -translate-y-2.5 relative">$</span>
            <span class="text-3xl font-bold text-gray-800">10</span>
            <span class="text-sm -translate-y-0.5 inline-block transform">/ user</span>
        </p>
    </div>
</div>

הקלאס border-gray-200 קובע את צבע הרקע לגוון מסוים של אפור והקלאס text-green-400 קובע את צבע הטקסט לגוון מסוים של ירוק. אתם מוזמנים לנסות לנחש מה אומר כל אחד מהקלאסים האחרים.

אז האם שווה לכם לנסות את טיילוינד לפרויקט הבא שלכם? הנה הטוב הרע והמכוער של הספריה.

1. הטוב - זה עובד

נתחיל בחדשות הטובות - טיילוינד עובד. כשלא צריכים לחפש איזה קומפוננטת antd בדיוק תתאים, אפשר להסתכל על העמוד, לכתוב את כללי העיצוב כמו Inline Styles ולראות איך דברים נבנים לאט צעד אחר צעד. ובתור בונוס מיוחד אתם לא צריכים להמציא שמות מוזרים לקלאסים רק בשביל שתוכלו להדביק קצת CSS על אלמנט.

אבל מה שיותר טוב כאן מ Inline Style הוא שב Inline Style כל מספר או כל ערך הוא "קסום", הוא הגיע משום מקום ולא תמיד ברור באיזה ערך להשתמש במקום חדש. אם ניקח את דוגמת הצבעים, אז העובדה שיש לי קלאס text-green-200 אבל אין לי קלאס text-blue-200 אומרת שבפלטת הצבעים בפרויקט שלי יש צבע ירוק והוא מוגדר להיות בערך מסוים. אגב את הצבעים והפונטים אנחנו מגדירים בקובץ קונפיגורציה של tailwind ויש לנו שליטה מלאה על הערכים. הדבר החשוב כאן הוא ש Tailwind עוזר לנו לסדר איזה "כללי CSS" מותר לכתוב בפרויקט, כלומר באיזה צבעים מותר להשתמש, מה הריפודים המקובלים, מה גדלי הגופן שנשתמש בהם וכך הלאה. בצורה כזאת אנחנו כותבים Inline Style אבל עם קצת יותר סדר וקצת יותר כללים מאשר מאפיין style רגיל.

גם שיתוף קוד עם חברים הוא ממש פשוט ולא צריך שהחבר ישתמש באותו JavaScript Framework שלי (למעשה אין כאן JavaScript Framework בכלל), ויש המון דוגמאות ברשת לעיצובים שאנשים הכינו עם טיילוינד. ואם אתם מאלה שמעדיפים להשתמש בקומפוננטות מוכנות אז פרויקט משלים בשם Tailwind UI כולל אוסף של אינסוף קומפוננטות טיילוינד (בתשלום וברישיון דרקוני) שתוכלו לקנות לפרויקט שלכם. יש גם פרויקט קוד פתוח בשם Daisy UI שמציע קומפוננטות פחות יפות אבל בחינם.

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

2. הרע - מנגנון Extracting Components דורש משמעת שאין לנו

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

להגנתם של טיילוינד צריך להגיד שהם כן חשבו על הבעיה ויצרו מנגנון בשם apply שבדיוק מאפשר להוציא אוסף של הגדרות tailwind לתוך קלאס חדש. זה מחזיר את הבעיה אלינו המתכנתים שנוטים לא להשתמש מספיק במנגנונים גנריים במצבים כמו כתיבת CSS.

3. המכוער - תזכיר לי שוב מה זה p-2

הבעיה השניה עם Tailwind נוגעת ל Workflow. בהנחה שאין לכם תמיכה מספיק טובה ב IDE, אתם הולכים לבלות הרבה זמן בתיעוד שלהם כדי להבין איזה קלאס בדיוק אומר "ריפוד של 8 פיקסלים". בתיעוד רשימת הקלאסים לריפוד או באופן כללי לגדלים מציגה את הערכים ב rem-ים:

p-0     padding: 0px;
p-px    padding: 1px;
p-0.5   padding: 0.125rem;
p-1     padding: 0.25rem;
p-1.5   padding: 0.375rem;
p-2     padding: 0.5rem;
p-2.5   padding: 0.625rem;
p-3     padding: 0.75rem;
p-3.5   padding: 0.875rem;
p-4     padding: 1rem;

ועכשיו אתם צריכים לחשב כמה rem-ים יוצאים ה 8 פיקסלים שלכם ואיזה קלאס בדיוק מתאים לריפוד שהמעצב רצה (וזה במקרה הטוב שקיים קלאס כזה, אחרת צריך ליצור חדש).

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