יצירת צבעי Tailwind

יצור פלטת 11 גוונים של 50–950 ב-Tailwind CSS וקוד הגדרה מקוד Hex בצבע יחיד

מידע על עדכוניםהוספת יצירת צבעי Tailwind, יצירת 11 גוונים וקוד הגדרות מצבע אחדצפייה בעדכונים

תכונות

יצור 11 גוונים מצבע אחד

הנח את הצבע שהזנת ב-500 וחשב גוונים בין 50 ל-950

תמיכה בשתי גרסאות v3 ו-v4

התחלף בין קוד config ו-@theme בכרטיסיות

העתק Hex לכל גוון

העתק קודי צבע כל צבע אחד בכל פעם דרך כפתור סמן צבע

עדכן פלטה תוך הקלדה

בדוק והשווה צבעים ללא כפתור הפעלה

אופן השימוש

הזן Hex של צבע הבסיס

הזן קוד Hex או לחץ על סמן הצבע בקצה השמאלי לבחירה דרך בורר הצבע

הזן שם צבע לפי הצורך

הזן שם צבע באותיות קטנות באנגלית לשימוש בקוד. אם שדה ריק, ישתמש primary

בדוק סמנים של 11 גוונים

בדוק סמנים וקודי Hex של 50–950, והעתק כל צבע בכפתור ההעתקה של הסמן

בחר פורמט פלט והעתק

בחר v3 או v4 והעתק קוד ל-tailwind.config.js או קובץ CSS

מקרי שימוש

יצירת גוונים של צבע מותג

הגדר גוונים עקביים מצבע מותג אחד לשימוש בהאחרה כפתורים והרקעות

הוסף צבעים שאינם בפלטה הסטנדרטית

הוסף צבעים ייחודיים לפרויקט כ-11 גוונים בקובץ הגדרות Tailwind

יצירת הגדרת @theme של v4

כתוב משתנים CSS של Tailwind v4 מצבע ראשי של האתר

הכנת יישום של ערסק עיצוב

הכן קוד 11 גוונים לביצוע מצבע מוגדר בערסק, והעתק גם לכלי עיצוב

ידע יסודי

מה מייצג 50–950 ב-Tailwind

צבעי Tailwind CSS משתמשים בספרות בין 50 ל-950 ב-11 שלבים לביעור בהירות, כשגם 500 היא הסטנדרט של אותו צבע. ספרות משמשות בסוף שמות מחלקות כמו "bg-primary-500" ו-"text-primary-700".

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

ההבדל בדרכי הגדרת צבע בין v3 ל-v4

ב-v3 של Tailwind CSS צבעים מוגדרים ב-JavaScript של tailwind.config.js, וב-v4 הם מוגדרים כמשתנים CSS בתוך @theme של קובץ CSS. בשתי דרכי כתיבה, הצבע המוגדר משמש שמות מחלקות זהים כמו "bg-primary-500".

דרך v3：דרך v3 היא הגדרת צבעים בתוך theme.extend.colors בפורמט "primary: { 500: '#3B82F6' }" עם שם צבע וגוון קינון.
דרך v4：דרך v4 היא הגדרת משתנים בתוך @theme בפורמט "--color-primary-500: #3B82F6;" עם שם צבע וגוון המחוברים בהיפן.