ב-Tailwind CSS, א שולים משמש לשליטה על המרווח סביב האלמנט הספציפי. זה מוסיף רווח בין האלמנט המיושם לאלמנטים הסובבים אותו. Tailwind CSS מספק קבוצה של כלי עזר לשוליים וערכי שוליים המאפשרים למשתמשים להתאים אישית את המרווח סביב האלמנטים הרצויים. יתר על כן, משתמשים יכולים להוסיף שוליים לצד בודד, כגון החלק העליון, התחתון, השמאלי או הימני של אלמנט מסוים.
בלוג זה ידגים דוגמאות להוספת שוליים לצד בודד של אלמנט ב-Tailwind CSS.
כיצד להוסיף שוליים לצד בודד ברוח גב?
כדי להוסיף שוליים לצד בודד של אלמנט ב-Tailwind, ניתן להשתמש במחלקות השירות הבאות:
כדי להבין זאת טוב יותר, עבור על הדוגמאות הבאות.
דוגמה 1: הוסף שוליים לחלק העליון של אלמנט
בדוגמה זו, נשתמש ב-' mt-14 ' מחלקת שירות ב' תְפוּקָה דוגמה 2: הוסף שוליים לתחתית אלמנט בדוגמה זו, נשתמש ב-' mb-14 'כיתה ב' דוגמה 3: הוסף שוליים משמאל לאלמנט בדוגמה זו, נשתמש ב-' ml-14 'כיתה ב' דוגמה 4: הוסף שוליים מימין לאלמנט בדוגמה זו, נשתמש ב-' מר-14 'כיתה ב' כדי להוסיף שוליים לצד בודד של אלמנט ב-Tailwind, ניתן להשתמש במחלקות שירות שונות, כגון ' ml-
< div מעמד = 'h-96 mt-14 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
כאן:
הפלט לעיל מראה שהשוליים נוספו לחלק העליון של המיכל.
< div מעמד = 'h-96 mb-14 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
תְפוּקָה 
ניתן לראות שהשוליים נוספו לתחתית המיכל.
< div מעמד = 'h-96 ml-14 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
תְפוּקָה 
הפלט שלמעלה מראה שהשוליים נוספו משמאל לרכיב המיכל.
< div מעמד = 'h-96 mr-14 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
תְפוּקָה 
כפי שאתה יכול לראות, השוליים נוספו ביעילות מימין למיכל. סיכום