Tailwind CSS

גרסה 4.3 מעבירה את כל עבודת הסגנון שלכם ישירות לתוך קובץ ה-HTML. במקום להמציא שמות מופשטים למחלקות ולתחזק קובצי סגנון נפרדים, אתם מצמידים לתגיות מחלקות קצרות כמו flex, text-center, rotate-90 או pt-4. המבנה הפנימי נשען על cascade layers מסודרות של CSS תחת theme, base, components ו-utilities, מה שמסיר לחלוטין את בעיית ההתנגשויות בין כללי סגנון שונים. בנוסף, מוגדרת תמיכה מובנית במרחב צבעים רחב מסוג P3 בפורמט oklch, שכולל גוונים מדורגים בין 50 ל-950 כמו mint או rose, ללא צורך בהגדרות צבע מורכבות ידנית.

התוצאה מפתיעה בקלילותה. המנוע מזהה בזמן הבנייה רק את המחלקות שהופעלו בקוד בפועל ומוחק את כל היתר. רוב הפרויקטים שולחים לדפדפן קובץ עיצוב סופי ששוקל פחות מ-10kB.

שליטה מוחלטת בתוך ה-HTML

הקוד שלכם מתמלא במחלקות ישירות בתוך ה-HTML במקום בקבצי עיצוב חיצוניים. עבור מי שמפתח ממשקים מורכבים ב-React או ב-Vue, צורת העבודה הזו חוסכת קפיצות בלתי פוסקות בין קבצים שונים. הפריסה הרספונסיבית מנוהלת באמצעות קידומות גודל מסך פשוטות כמו sm, md, lg או xl שמוצמדות לפני כל מחלקה. יש כאן גם תמיכה ב-container queries דרך מחלקת container@ עם קידומות כמו sm@, שמאפשרות לתמונות או עמודות ברשת CSS grid להתאים את עצמן לגודל המכל הישיר שלהן. תוכלו להוסיף מעברים ואנימציות בעזרת מחלקות כמו transition ו-duration-750, או להחיל פילטרים גרפיים דוגמת blur-sm, brightness-150 וטשטוש רקע.

לא הייתי משתמש בזה לאתר תוכן פשוט.

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

זה חוסך תחזוקה כפולה.

מודל הפיתוח ומחיר הנעילה

הקוד פותח ומנוהל במאגר ציבורי תחת Tailwind Labs Inc באתר GitHub, ונתמך באמצעות שותפים מסחריים ונותני חסות שמממנים צוות מעצבים ומהנדסים במשרה מלאה. האתר אינו מציג מחירון, דמי מנוי או תשלום חודשי עבור השימוש בספרייה, אם כי קיים קישור לשירות מורחב בשם Plus שלא מפורט בעמוד. אתם יכולים להוריד את הקוד חופשי ולהטמיע אותו בפרויקט קיים או חדש. זה מתאים לפרילנסרים, למיזמים בתחילת הדרך וגם לצוותים גדולים, בדיוק כפי שעושים צוותים בחברות כמו OpenAI, Reddit ו-Shopify.

הם לא מפרסמים מחיר.

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

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