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

מאמר זה יסביר את השיטה לשימוש בערכים שרירותיים ב- Tailwind CSS.

כיצד לנצל ערכים שרירותיים ב-Tailwind?

ערכים שרירותיים הם הערכים המותאמים אישית שניתן לכתוב ישירות בתכונת HTML class מבלי להגדיר אותם בקובץ התצורה של Tailwind. יש להם קידומת סימון סוגריים מרובעים, כגון [24px], [2.5rem] וכו'. כדי להשתמש בערכים השרירותיים ב-Tailwind, השתמש בסימון סוגריים מרובעים וציין כל ערך מותאם אישית כדי ליצור מחלקות שירות באופן דינמי.

בדוק את השלבים המפורטים להלן להבנה טובה יותר:

שלב 1: השתמש בערכים שרירותיים בתוכנית HTML

צור תוכנית HTML והשתמש בסימון סוגריים מרובעים עם כל ערך מותאם אישית כדי ליצור את המחלקות הרצויות. לדוגמה, השתמשנו ב- 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', וחוגים נוספים:

כאן:

• 'bg-[#e9e516]' מחלקה מגדירה את צבע הרקע של ה-
  ל '#e9e516' (צהוב).
• 'w-[600px]' class מגדירה את רוחב ה-
  ל-600 פיקסלים.
• 'h-[400px]' class מחיל את הגובה של 400 פיקסלים על האלמנט
  .
• 'p-[13px]' class מגדיר את הריפוד של ה-
  ל-13 פיקסלים.
• 'm-[19px]' class מגדיר את השוליים של
  ל-19 פיקסלים.

• 'טקסט-[30px]' class מגדיר את גודל הגופן של רכיב

  ל-30 פיקסלים.

• 'טקסט-[#7405ab]' class הגדר את צבע הטקסט של רכיב

  לסגול (#7405ab).

• 'מעקב-[0.5rem]' class מחיל את מרווח האותיות על 0.5 rem לרכיב

  .

שלב 2: אימות פלט

כדי להבטיח שהערכים השרירותיים פועלים כהלכה, הצג את דף האינטרנט HTML:

הפלט לעיל מציין שהערכים השרירותיים פועלים כהלכה כפי שהוגדרו.

סיכום

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