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

והכח של טיילווינד ביישומי ריאקט הוא שזה פשוט פיתרון הרבה יותר קל והרבה יותר טוב מכתיבת Inline Styles.

בואו נראה איך זה עובד ואיך לשלב את טיילווינד ביישום שלכם.

1. טיילווינד או Inline Style

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

function App() {
  return (
    <div className="App">
      <h1>My Cool Game</h1>
      <ul style={{ listStyle: 'none', padding: '0', display: 'flex', flexDirection: 'column' }}>
        <li style={{ margin: '0.5rem 0' }}><MenuButton>Single Player</MenuButton></li>
        <li style={{ margin: '0.5rem 0' }}><MenuButton>Multi Player</MenuButton></li>
      </ul>
    </div>
  )
}

function MenuButton({ href="#", children }) {
  const style = {
    display: 'inline-block',
    width: '10rem',
    textDecoration: 'none',
    background: '#4CAF50',
    border: 'none',
    color: 'white',
    padding: '1rem 1.5rem',
    fontSize: '1.5rem',
  };

  return (
    <a href={href} style={style}>{children}</a>
  );
}

export default App

שמצד אחד הוא מאוד נוח לכתיבה ונראה קל לתחזוקה, אבל בפרויקט גדול ל Inline Style יש מספר חסרונות:

1. קשה להשתמש בקומפוננטה במקום אחר עם הגדרות עיצוב אחרות, כי אי אפשר לדרוס Inline Style מתוך CSS בצורה נוחה.

2. כשמתחילים להכניס Media Queries, Dark Mode או אפילו hover אנחנו מגלים ש Inline Style לבדו לא מספיק וצריך להוסיף ספריה נוספת כמו Styled Components. זה לא בהכרח רע אבל מוסיף סיבוכיות משלו.

3. יש צורך לזכור ערכים שרירותיים ולהשתמש באותם ערכים בין קומפוננטות (לדוגמה גודל השוליים).

אותו קוד בהמרה ל Tailwind הולך להיראות מאוד דומה, רק שהגדרות העיצוב עוברות ממאפיין style למאפיין class בצורה קצת יצירתית:

function App() {
  return (
    <div className="App p-4">
      <h1>My Cool Game</h1>
      <ul className="flex p-0 flex-col">
        <li className="my-4"><MenuButton>Single Player</MenuButton></li>
        <li className="my-4"><MenuButton>Multi Player</MenuButton></li>
      </ul>
    </div>
  )
}

function MenuButton({ href="#", children }) {
  return (
    <a className="inline-block py-4 px-6 text-white w-40 bg-[#4CAF50]" href={href}>{children}</a>
  );
}

export default App

היתרונות בקצרה:

1. הגדרות העיצוב קצרות יותר.

2. אני לא מגדיר גדלים שרירותיים אלא משתמש במספרים של Tailwind כמו p-4 שמציין padding בגודל 1rem. וכן אפשר לבחור את המשמעות של p-4 בקובץ קונפיגורציה אם אתם צריכים גדלים שונים.

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

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

5. ל Tailwind יש תמיכה מלאה ב Media Queries, hover וכל מה שתרצו.

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

https://transform.tools/css-to-tailwind

2. איך לשלב טיילווינד ביישום שלכם

בשביל לבנות פרויקט ריאקט עם Tailwind CSS בסך הכל צריך ללכת לפי ההוראות באתר שלהם בקישור https://tailwindcss.com/docs/guides/vite. אני מדביק פה את התקציר שיהיה לנו:

$ npm create vite@latest my-project -- --template react
$ cd my-project
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

אחרי זה צריך לעדכן קובץ קונפיגורציה בשם tailwind.config.cjs כדי שיכיל את התוכן הבא:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ולהוסיף 3 שורות לקובץ ה src/index.css בפרויקט:

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

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