Tailwind – מהירות גמישות ויעילות

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

מה זה Tailwind ומה מטרתו?

Tailwind CSS הוא framework מבוסס CSS הממקד את העבודה בגישת Utility-First. במקום לעבוד עם קלאסים מוכנים מראש כמו ב-Bootstrap, טיילווינד מספק ספרייה ענקית של קלאסים קטנים וממוקדים שניתן לשלב כדי לבנות כל עיצוב שתדמיינו.

לדוגמה, במקום להסתמך על קלאס כמו btn-primary, אתם תשתמשו בקלאסים כמו bg-blue-500 (רקע כחול ברמת גוון 500), text-white (צבע טקסט לבן) ו-px-4 (ריווח פנימי אופקי בגודל 1 rem) כדי לבנות בדיוק את מה שאתם צריכים, בלי להתפשר על גמישות.

דיברתי על טיילווינד גם ב Front Cast

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

למה דווקא Tailwind?

Tailwind בולט בכמה תחומים:

• גמישות מוחלטת: אתם מקבלים שליטה מלאה על העיצוב שלכם, כולל האפשרות לערוך בקלות את ה-theme של הפרויקט. לדוגמה, ניתן להגדיר צבעים מותאמים אישית, טיפוגרפיה, ואפילו להוסיף או לשנות קלאסים קיימים לפי הצורך.
• Scalability: קל מאוד להרחיב ולתחזק קוד כתוב עם Tailwind, במיוחד בפרויקטים גדולים. לדוגמה, בעבודה על פרויקט רב-לשוני עם עיצובים מותאמים אישית, Tailwind אפשר לנו להגדיר themes שונים לצבעים, טיפוגרפיה וריווח, ולשלב אותם בקלות בין קומפוננטות שונות. זה שיפר משמעותית את זרימת העבודה בצוות והקטין את התלות בכתיבת קוד CSS ייעודי לכל שינוי.
• פיתוח מהיר: בזכות הקלאסים הממוקדים, ניתן לעצב ממשקים מורכבים בצורה מהירה ויעילה. תבינו שעכשיו בקלאס אחד אתם כוללים גם חוק css וגם את הערך שלו – במקום לרשום display: flex זה הופך ל- flex.

השוואה מול כלים מתחרים

ספריות קומפוננטות

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

כלי CSS-in-JS

בניגוד לכלים כמו CSS-in-JS (למשל Styled Components), Tailwind פחות תלוי ב-JavaScript ומציע פתרון קליל וממוקד יותר לניהול עיצוב, במיוחד בפרויקטים שאינם דורשים רינדור צד שרת.

איך להתחיל לעבוד עם Tailwind?

התקנה עם npm עבור Vite + React

1. התקינו את Tailwind ואת הכלים הנדרשים:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. הגדרת קובץ הקונפיגורציה: בקובץ tailwind.config.js, ניתן להגדיר את ה-theme, צבעים, ועוד:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. הכניסו את Tailwind לקובץ ה-style הראשי שלכם: צרו קובץ src/index.css והוסיפו את השורות הבאות:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. ודאו ש-Vite יודע לייבא את הקובץ הראשי בפרויקט React שלכם.

דוגמאות

יצירת כרטיס (Card) ב-React

const Card = () => {
  return (
    <div className="m-auto mt-10 max-w-sm rounded overflow-hidden shadow-lg bg-primary text-secondary">
      <img className="w-full" src="/img/card-top.jpg" alt="Card image" />
      <div className="px-6 py-4">
        <h2 className="font-bold text-xl mb-2">Nice Card Title</h2>
        <p className="text-gray-700 text-base">This is the best card i've ever seen!</p>
      </div>
      <div className="px-6 py-4 flex justify-end">
        <button className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
          Click here!
        </button>
      </div>
    </div>
  );
};

שינוי צבעים דרך ה-theme

בקובץ tailwind.config.js, הרחיבו את הצבעים של הפרויקט:

theme: {
  extend: {
    colors: {
      primary: '#1E3A8A',
      secondary: '#9333EA',
    },
  },
},

בכרטיס, שנו את הצבעים:

<div className="m-auto mt-10 max-w-sm rounded overflow-hidden shadow-lg bg-primary text-secondary">

שימוש בקלאסים דינמיים ומניעת קונפליקטים

בעת עבודה עם React ו-Tailwind, ניתן לשלב את חבילות clsx ו-twMerge כדי לפשט ניהול קלאסים ולמנוע קונפליקטים. לדוגמה, אם תרצו שהכרטיס שלנו יכלול קלאסים מותנים, תוכלו להשתמש בקוד הבא:

צרו פונקציית util שעושה שימוש גם ב clsx וגם ב- twMerge:

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

// cn is short name for classNames
export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

import React from 'react';
import { cn } from './utils';

type CardProps = {
  isHighlighted: boolean;
};

const Card = ({ isHighlighted }: CardProps) => {
  const cardClass = cn(
    'm-auto mt-10 max-w-sm rounded overflow-hidden shadow-lg bg-primary text-secondary transition',
    { 'shadow-2xl bg-slate-200': isHighlighted }
  );

  return (
    <div className={cardClass}>
      <img className="w-full" src="/Scenery.jpg" alt="Card image" />

      <div className="px-6 py-4">
        <h2 className="font-bold text-xl mb-2">Nice Card Title</h2>

        <p className="text-gray-700 text-base">
          This is the best card i've ever seen!
        </p>
      </div>

      <div className="px-6 py-4 flex justify-end">
        <button className="border border-blue-500 text-blue-500 hover:bg-blue-700 hover:text-white py-1 px-2 text-sm rounded">
          Simple button
        </button>
      </div>
    </div>
  );
};

export default Card;

במקרה הזה, clsx מטפל במיזוג קלאסים על בסיס תנאים, ו-twMerge מוודא שאין קונפליקטים בין קלאסים מתחרים, כמו bg-primary ו-bg-secondary.

והנה התוצאה הסופית בלייב:

פיצ׳רים מגניבים

• Arbitrary Values: אפשרות להוסיף ערכים מותאמים אישית ישירות בקלאסים. לדוגמה, mt-[3.7rem] מוסיף margin-top בדיוק בגודל שציינתם.
• Group Styling: מאפשר לשנות עיצובים של אלמנטים בתלות במצב של קבוצת אלמנטים. לדוגמה, group-hover:bg-red-500 משנה את הרקע כשאלמנט ההורה מקבל hover.
• Dark Mode מובנה: ניהול עיצובים במצב כהה בצורה קלה עם קלאסים כמו dark:bg-black.
• State Variants: גישה פשוטה למצבי אלמנטים שונים, כמו :hover , :focus, ו-active:.
• Responsive Design מובנה: שימוש בקלאסים כמו sm:, md:, ו-lg: כדי להתאים עיצובים למסכים שונים.

מה פחות טוב בטיילווינד?

• עומס בקבצי HTML: שימוש אינטנסיבי בקלאסים עלול להיראות "מבולגן". אם כי בעיניי זו תפיסה שגויה, אחרי שהתנסיתי, לא היה לי קשה לעקוב אחרי הסטייל של הקומפוננטה פשוט כי הקלאסים כבר מוכרים אחרי זמן מה והכל הופך די מהר לאוטומטי. * טיפ חשוב – תקפידו לפצל נכון את האלמנטים ב dom כדי להפחית כמויות של קלאסים על אלמנט אחד – וזה טיפ נכון גם אם לא תעבדו עם טיילווינד.
• עקומת למידה: למי שמורגל ב-CSS קלאסי או ב-frameworks אחרים, המעבר עשוי לקחת זמן.
• תלות ב-build tools: כדי למצות את Tailwind, צריך להשתמש בכלים כמו PostCSS. אגב למיטב ידיעתי בגירסא החדשה שכרגע ב Beta זה הולך להשתנות.

איך זה נראה מהעיניים שלי?

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

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

מסקנות + המלצות למקורות ידע חיצוניים

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

מקורות מומלצים:

קראו עוד על ספריות UI וביניהן על Headless Components

מקורות נוספים:

• האתר הרשמי של Tailwind CSS
• Tailwind Play להתנסות חיה.
• Headless UI – קומפוננטות מותאמות ל-Tailwind.