פוסט זה ממחיש את כל ההיבטים האפשריים להוספת 'סגנונות בסיס' ב- Tailwind CSS.
כיצד להוסיף סגנונות 'בסיס' ב-Tailwind?
'Tailwind CSS' מגיע עם שלוש השיטות הבאות להוספת סגנונות ה'בסיס' בכל תוכן ה-HTML או באלמנט מסוים:
בואו נחקור אותם אחד אחד.
דרישות מוקדמות
לפני שתמשיך ליישום המעשי, ראשית, עיין בפרויקט החדש שנוצר בשם 'Linuxhint' המשמש להוספת 'סגנונות הבסיס':
מבנה קובץ הפרויקט
כעת, נווט לקובץ 'index.html' והסתכל בקוד ה-HTML שלו:
< html >< רֹאשׁ >
< קישור href = '/dist/output.css' rel = 'גיליון סגנונות' >
< / רֹאשׁ >
< גוּף >
< h2 מעמד = 'קו תחתון של מרכז טקסט גופן-בולט טקסט-ורוד-600' > ברוכים הבאים ל- Linuxhint! < / h2 >< br >
< h3 מעמד = 'טקסט-center font-bold text–orange-600' > מדריך: הוספת סגנונות בסיס ב-Tailwind. < / h3 >< br >
< / גוּף >
בשורות הקוד לעיל:
תְפוּקָה
הפלט של הקוד לעיל מוצג כאן:
כעת, השתמש בשיטה הנדונה כדי להתאים אישית את קוד ה-HTML לעיל על ידי הוספת סגנונות הבסיס. נתחיל בשיטת Tailwind 'CSS'.
שיטה 1: השתמש ב-CSS כדי להוסיף 'סגנונות בסיס' ב-Tailwind
השיטה הפשוטה והקלה ביותר להוסיף סגנון בסיס לאלמנט ה-HTML הספציפי היא להוסיף אותם בקובץ ה-CSS הראשי של הפרויקט. הבה נבצע משימה זו באופן מעשי על ידי ביצוע השלבים הנתונים.
שלב 1: פתח את קובץ ה-CSS
ראשית, פתח את קובץ ה-CSS הראשי, כלומר, ' style.css ' שמכיל את 'בסיס' הרוח הגבית המובנית, 'רכיבים' ושכבות 'כלי עזר':
שלב 2: הוסף את ה-CSS
לאחר מכן, הוסף את סגנון ה-'base' עבור רכיבי ה-HTML הספציפיים '
' ו-'' על ידי החלת המחלקות באמצעות ' @להגיש מועמדות ההנחיה בשכבת ה'בסיס' בעזרת ה-' @שִׁכבָה ' מילת מפתח. מילות המפתח '@layer' מוסיפות את המחלקות המוגדרות בשכבת ה'בסיס' שצוינה: @בסיס שכבה {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
בשורות הקוד לעיל, ' גודל גופן מחלקה מוחלת על האלמנטים '
' ו-'' כדי להגדיל אותם עד לגודל שצוין, בהתאמה:
שמור (Ctrl + S) את הקובץ.
שלב 3: פלט
כעת, הפעל את הקוד בשרת החי וראה את הפלט, באופן הבא:
כאן, הפלט מראה שהמחלקה Tailwind 'גודל גופן' מוחלת בהצלחה על האלמנט שצוין בשכבת הבסיס.
הערה : אותה גישה משמשת עבור כל שאר מחלקות Tailwind CSS.
שיטה 2: השתמש בתוסף כדי להוסיף 'סגנונות בסיס' ב-Tailwind
שיטה שימושית נוספת להוספת סגנונות 'בסיס' היא לכתוב ' חיבור ' והשתמש ב-' addBase() ' פונקציה. פונקציה זו עוזרת לרשום כיתות חדשות ב' בסיס ' הנחיית שכבה. פונקציה זו משמשת בקובץ Tailwind 'tailwind.config.js'. בואו נעשה את זה באופן מעשי.
שלב 1: הגדר את הפונקציה 'addBase()'.
ראשית, נווט אל ' tailwind.config.js ' קובץ התצורה והוסיפו את סגנונות הבסיס מהפלאגין וקראו לפונקציה 'addBase()':
שמור את הקובץ.
שלב 2: פלט
לבסוף, הפעל את קוד ה-HTML הנתון וראה את הפלט:
כפי שניתן לראות, מחלקת Tailwind 'גודל גופן' המוגדרת בפונקציה 'addBase()' כאובייקט JavaScript מוחלת על רכיבי ה-HTML שצוינו.
סיכום
ניתן להוסיף בקלות סגנונות בסיס רוח גבית באמצעות ' CSS ' מחלקות בקובץ ה-CSS הראשי וה' חיבור ' עם ה ' addBase() ' פונקציה בקובץ התצורה. שיטת 'CSS' נחשבת לשיטה הפשוטה ביותר מכיוון שהיא רק מגדירה את סגנונות הבסיס בשכבת ה'בסיס' ומיישמת אותם אוטומטית באלמנט שצוין. מצד שני, קטע ה'פלאגין' של ' tailwind.config.js ' הקובץ דורש את הפונקציה 'addBase()' כדי להגדיר את סגנונות הבסיס כאובייקטי JavaScript. פוסט זה המחיש את כל ההיבטים האפשריים להוספת סגנונות בסיס ב- Tailwind CSS.