Tailwind CSS מספק ' שולים ' מחלקות שירות המאפשרות למשתמשים לשלוט על המרווח סביב אלמנטים. ה שוליים אופקיים מוסיף רווח לצד שמאל וימין של אלמנט, ואילו a שוליים אנכיים מוסיף מקום לחלק העליון והתחתון של אלמנט. Tailwind מציעה מחלקות שירות שונות כדי להוסיף שוליים אופקיים או אנכיים לאלמנטים הרצויים.
מאמר זה ידגים:
כיצד להוסיף שוליים אופקיים ברוח גב?
כדי להוסיף שוליים אופקיים לרכיב ב-Tailwind, ה-' mx-
תחביר
< אֵלֵמֶנט מעמד = 'mx-
כאן, 'mx' מייצג את 'ציר x' או 'שוליים אופקיים'. הקפד להחליף את '
דוגמה: החלת שוליים אופקיים על רכיב HTML
בדוגמה זו, נשתמש ב-' mx-10 מחלקת השירות עם ה-' כדי להוסיף שוליים אנכיים לרכיב ב-Tailwind, השתמש ב-' שלי-<ערך> מחלקת השירות עם האלמנט הספציפי בתוכנת HTML. מחלקה זו מוסיפה שוליים לאורך ציר ה-y (הצד העליון והתחתון). תחביר דוגמה: החלת שוליים אנכיים על רכיב HTML בדוגמה זו, נשתמש ב-' שלי-10 מחלקת השירות עם ה-' כדי להוסיף את השוליים האופקיים והאנכיים ב-Tailwind, ' mx-
< גוּף >
< div מעמד = 'h-screen mx-10 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
תְפוּקָה 
הפלט לעיל מציג את השוליים בצד שמאל וימין של המיכל. זה מציין שהשוליים האופקיים הוחלו על רכיב המכולה בהצלחה. כיצד להוסיף שוליים אנכיים ברוח גב?
כאן, 'שלי' מייצג את 'ציר ה-y' או 'השוליים האנכיים'. הקפד להחליף את '
< div מעמד = 'h-96 my-10 bg-purple-500' >
< ע מעמד = 'טקסט-5xl מרכז טקסט' > שולים ב Tailwind CSS ע >
div >
גוּף >
תְפוּקָה 
הפלט לעיל מציג את השוליים לצד העליון והתחתון של המיכל. זה מצביע על כך שהשוליים האנכיים הוחלו ביעילות על אלמנט המיכל. סיכום