ระยะห่าง

ระยะห่างช่วยให้มั่นใจถึงความสอดคล้องของระยะขอบ การเติม ช่องว่าง ฯลฯ ในส่วนประกอบต่างๆ คลาสระยะห่างมาจากตัวแปร root ดังต่อไปนี้

ค่า	ตัวแปร Root	คลาส
2px	--size-50	size-spacing-6xs
4px	--size-100	size-spacing-5xs
6px	--size-150	size-spacing-4xs
8px	--size-200	size-spacing-3xs
12px	--size-250	size-spacing-2xs
16px	--size-300	size-spacing-xs
24px	--size-400	size-spacing-sm
32px	--size-500	size-spacing-md
40px	--size-600	size-spacing-lg
48px	--size-700	size-spacing-xl
64px	--size-800	size-spacing-2xl
72px	--size-900	size-spacing-3xl
80px	--size-1000	size-spacing-4xl
96px	--size-1100	size-spacing-5xl
128px	--size-1200	size-spacing-6xl

การใช้งาน

ระยะห่างได้รับการนำไปใช้เพื่อขยายขนาดระยะห่างเริ่มต้นของ Tailwind ดังนั้น ค่าเหล่านี้จึงถูกสืบทอดโดย padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, และ scrollPadding (ดู เอกสาร Tailwind)

ในการใช้ระยะห่างเหล่านี้ เพียงเพิ่มคลาส size-spacing ข้างต้นไปยังยูทิลิตี้ Tailwind ต่อไปนี้คือตัวอย่างบางส่วน:

คลาส	คำอธิบาย
spr-m-size-spacing-xs	margin: 16px;
spr-mb-size-spacing-md	margin-bottom: 32px;
spr-px-size-spacing-4xs	padding-left: 6px; padding-right: 6px;