ב-Tailwind CSS, ריפוד הוא הרווח בין התוכן של האלמנט הספציפי לבין הגבול שלו. ריפוד אופקי הוא הרווח בצד שמאל וימין של האלמנט, ואילו ריפוד אנכי הוא החלל בחלק העליון והתחתון של אלמנט. Tailwind מציעה מחלקות שירות שונות להוספת ריפוד אופקי או אנכי לאלמנטים הרצויים.
מאמר זה ימחיש:
כיצד להוסיף ריפוד אופקי ברוח הגבית?
כדי להוסיף ריפוד אופקי לאלמנט ב-Tailwind, המחלקה 'px-
תחביר
< אֵלֵמֶנט מעמד = 'px-0...' > ... אֵלֵמֶנט >
כאן 'px' מייצג את 'ציר x' או 'ריפוד אופקי'.
דוגמה: החלת ריפוד אופקי על אלמנט HTML
בדוגמה זו, נשתמש ב-' px-20 מחלקת השירות עם ה-' כדי להוסיף ריפוד אנכי לאלמנט ב-Tailwind, השתמש ב-' py- תחביר דוגמה: החלת ריפוד אנכי על אלמנט HTML בדוגמה זו, נשתמש ב-' py-20 מחלקת השירות עם ה-' כדי להוסיף את הריפוד האופקי והאנכי ב-Tailwind, ' px-
< גוּף >
< div מעמד = 'bg-pink-600 px-20 w-max' >
ריפוד ב Tailwind CSS
div >
גוּף >
תְפוּקָה 
הפלט לעיל מציג את הריפוד בצד שמאל וימין של המיכל. זה מציין שהריפוד האופקי הוחל על אלמנט המיכל בהצלחה. כיצד להוסיף ריפוד אנכי ברוח הגבית?
כאן 'py' מייצג את 'ציר ה-y' או 'ריפוד אנכי'.
< div מעמד = 'bg-pink-600 py-20 w-max' >
ריפוד ב Tailwind CSS
div >
גוּף >
תְפוּקָה 
הפלט שלמעלה מציג את הריפוד לצד העליון והתחתון של המיכל. זה מצביע על כך שהריפוד האנכי הוחל ביעילות על אלמנט המיכל. סיכום