ค่าระยะห่างแบบกำหนดเอง
เพิ่มค่าระยะห่างเฉพาะโครงการ เช่น spacing.18 หรือ spacing.128 ลงในธีม เพื่อเติมช่องว่างในมาตราส่วนเริ่มต้น
ค่าระยะห่างแบบกำหนดเอง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
มาตราส่วนระยะห่างเริ่มต้นของ Tailwind
มาตราส่วนระยะห่างเริ่มต้นของ Tailwind ครอบคลุมค่าตั้งแต่ 0 ถึง 96 (ตั้งแต่ 0 ถึง 24rem โดยเพิ่มครั้งละ 0.25rem สำหรับค่าขนาดเล็ก แล้วจึงเพิ่มเป็นช่วงที่ใหญ่ขึ้น) มาตราส่วนนี้ใช้ร่วมกันอย่างสม่ำเสมอกับยูทิลิตีระยะขอบ ช่องว่างภายใน ความกว้าง ความสูง ช่องว่าง และการจัดตำแหน่ง ค่าเหล่านี้ออกแบบมาให้ครอบคลุมความต้องการด้านระยะห่างของส่วนติดต่อผู้ใช้ส่วนใหญ่ แต่การออกแบบในโลกจริงบางครั้งต้องใช้ค่าที่อยู่ระหว่างหรือนอกเหนือจากค่าเริ่มต้น
/* Tailwind default spacing examples */
spacing.0 = 0px
spacing.0.5 = 2px
spacing.1 = 4px
spacing.2 = 8px
spacing.4 = 16px
spacing.8 = 32px
spacing.16 = 64px
spacing.32 = 128px
spacing.64 = 256px
spacing.96 = 384pxเหตุผลที่ต้องใช้ระยะห่างแบบกำหนดเอง
ระบบการออกแบบมักต้องการค่าระยะห่างนอกเหนือจากมาตราส่วนเริ่มต้น เช่น ค่า 128 (32rem) สำหรับส่วนฮีโร่เต็มหน้า ค่า 4.5 (18px) สำหรับองค์ประกอบที่อยู่ระหว่างค่า 4 มาตรฐาน (16px) และ 5 (20px) หรือค่า 13 สำหรับความกว้างคอลัมน์ตารางเฉพาะ แทนที่จะใช้ค่าแบบกำหนดเองด้วยไวยากรณ์วงเล็บทุกครั้ง ให้เพิ่มค่าเหล่านี้ลงในการตั้งค่าเพียงครั้งเดียวและตั้งชื่อคลาสยูทิลิตีที่อ่านง่าย
การเพิ่มระยะห่างแบบกำหนดเองในการตั้งค่า
เพิ่มค่าระยะห่างแบบกำหนดเองภายใน theme.extend.spacing คีย์จะกลายเป็นส่วนต่อท้ายของยูทิลิตีระยะห่างทั้งหมด ส่วนค่าคือหน่วยวัด CSS ที่คุณต้องการ ใช้คีย์ชนิดสตริงสำหรับตัวเลขทศนิยมหรือจำนวนขนาดใหญ่ เพื่อให้แน่ใจว่าค่าจะถูกตีความอย่างถูกต้อง เมื่อเพิ่มแล้ว ระยะห่างแบบกำหนดเองจะทำงานโดยอัตโนมัติกับ m-*, p-*, w-*, h-*, gap-*, inset-* และยูทิลิตีระยะห่างอื่น ๆ ทั้งหมด
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'4.5': '1.125rem', // 18px — between default 4 and 5
'13': '3.25rem', // 52px
'128': '32rem', // 512px — for large hero sections
'144': '36rem', // 576px
'160': '40rem', // 640px
},
},
},
};การใช้ยูทิลิตีระยะห่างแบบกำหนดเอง
หลังจากเพิ่มค่าระยะห่างแบบกำหนดเองแล้ว ให้ใช้ค่าเหล่านี้เช่นเดียวกับยูทิลิตีระยะห่างที่มีมาให้ ระบุชื่อคีย์ต่อท้ายคำนำหน้าของยูทิลิตีและเครื่องหมายขีดกลาง ระยะห่างแบบกำหนดเองทำงานร่วมกับคำนำหน้าแบบตอบสนอง โหมดมืด และรูปแบบสถานะได้เช่นเดียวกับค่าเริ่มต้น ลักษณะที่ใช้ร่วมกันข้ามยูทิลิตีหมายความว่า คุณเขียนการตั้งค่าเพียงครั้งเดียว แล้วได้ยูทิลิตีช่องว่างภายใน ระยะขอบ ความกว้าง ความสูง และช่องว่างจากคำจำกัดความเดียวกัน
<!-- Using custom spacing values -->
<div class="p-4.5 m-13"> <!-- 18px padding, 52px margin -->
Custom spacing in padding and margin
</div>
<section class="min-h-128"> <!-- 512px minimum height -->
Full hero section
</section>
<div class="grid grid-cols-3 gap-4.5">
<!-- 18px gap between grid items -->
</div>การแทนที่มาตราส่วนระยะห่างทั้งหมด
สำหรับโครงการที่มีระบบการออกแบบเข้มงวดและต้องใช้เฉพาะค่าระยะห่างที่กำหนด ให้แทนที่มาตราส่วนระยะห่างทั้งหมดโดยวางค่าของคุณไว้โดยตรงใน theme.spacing (อยู่นอก extend) วิธีนี้ช่วยให้แน่ใจว่าไม่มีนักพัฒนาคนใดใช้ค่าระยะห่างนอกเหนือจากชุดที่อนุมัติโดยไม่ตั้งใจ ควรใช้แนวทางนี้อย่างระมัดระวัง เพราะการลบค่าเริ่มต้นของ Tailwind จะทำให้คลาสยูทิลิตีที่จำเป็นและใช้กันทั่วไปจำนวนมากหายไป
// Strict spacing system: only these values are available
module.exports = {
theme: {
spacing: {
'0': '0px',
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'6': '24px',
'8': '32px',
'12': '48px',
'16': '64px',
'24': '96px',
},
},
};คีย์ระยะห่างแบบเศษส่วนและทศนิยม
Tailwind รองรับคีย์แบบเศษส่วน เช่น '4.5' โดยสร้างคลาสยูทิลิตีที่ใช้รูปแบบเลขทศนิยมซึ่งปลอดภัยสำหรับ CSS ชื่อคลาสจะใช้เศษส่วนตามที่เขียนไว้: p-4.5, m-4.5 สำหรับคีย์ที่มีเครื่องหมายทับ (เช่น เศษส่วนสำหรับระยะห่างที่อิงเปอร์เซ็นต์) เครื่องหมายทับจะถูกเข้ารหัสในตัวเลือก CSS ควรใส่เครื่องหมายคำพูดให้คีย์ทศนิยมและคีย์เศษส่วนเป็นสตริงในออบเจ็กต์การตั้งค่าเสมอ เพื่อป้องกันไม่ให้ JavaScript ตีความเป็นค่าตัวเลข
// tailwind.config.js
spacing: {
'0.5': '2px', // p-0.5, m-0.5 (already in defaults)
'1.5': '6px', // p-1.5, m-1.5 (already in defaults)
'4.5': '1.125rem', // CUSTOM: p-4.5
'13': '3.25rem', // CUSTOM: p-13
'18': '4.5rem', // CUSTOM: p-18
'22': '5.5rem', // CUSTOM: p-22
}ค่าระยะห่างติดลบ
Tailwind จะสร้างรูปแบบติดลบโดยอัตโนมัติสำหรับค่าระยะห่างทั้งหมด ทั้งค่าเริ่มต้นและค่ากำหนดเอง หากเพิ่ม '128': '32rem' ลงในการตั้งค่าระยะห่าง คุณจะได้ -m-128, -mt-128, -inset-128 และอื่น ๆ ด้วย ค่าติดลบจะถูกสร้างโดยอัตโนมัติ ไม่จำเป็นต้องเพิ่มรายการแยกต่างหากในการตั้งค่า ค่าเหล่านี้มีประโยชน์อย่างยิ่งสำหรับองค์ประกอบที่ซ้อนทับกัน คำพูดดึงความสนใจ และการจัดตำแหน่งองค์ประกอบตกแต่ง
<!-- Negative spacing pulls elements outside their container -->
<div class="relative">
<div class="bg-blue-100 p-8">
Main content
<!-- This element extends 4px outside the parent top -->
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">
NEW
</span>
</div>
</div>ระยะห่างสัมพันธ์กับขนาดแบบอักษร
บางครั้งคุณอาจต้องการค่าระยะห่างที่ปรับตามขนาดข้อความแทนการใช้ค่า rem แบบตายตัว ให้เพิ่มค่าระยะห่างโดยใช้หน่วย em ในการตั้งค่า ค่าเหล่านี้จะสัมพันธ์กับขนาดแบบอักษรขององค์ประกอบนั้นเอง ตัวอย่างเช่น ปุ่มที่มีช่องว่างภายใน px-1.5em จะมีช่องว่างแนวนอนเป็นสัดส่วนเดียวกัน ไม่ว่าข้อความบนปุ่มจะมีขนาดเล็กหรือใหญ่
// tailwind.config.js
spacing: {
// em-based spacing (relative to font-size)
'0.25em': '0.25em',
'0.5em': '0.5em',
'0.75em': '0.75em',
'1em': '1em',
'1.25em': '1.25em',
'1.5em': '1.5em',
'2em': '2em',
}ระยะห่างสำหรับตารางระบบการออกแบบ
เมื่อการออกแบบของคุณอิงระบบตาราง 8px (หรือหน่วยพื้นฐาน 4px) ให้แมปทั้งตารางเข้ากับการตั้งค่าระยะห่าง ตาราง 8px หมายความว่าระยะห่างทั้งหมดเป็นทวีคูณของ 8px: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128 มาตราส่วนระยะห่างเริ่มต้นของ Tailwind สอดคล้องกับแนวทางนี้อยู่แล้ว (1 หน่วย = 4px ดังนั้น 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px) คุณอาจต้องเพิ่มเฉพาะค่าที่มากกว่า 96 เท่านั้น
// 8px grid — Tailwind already aligns, just extend for larger values
spacing: {
// Already in defaults (4px base unit):
// 2=8px, 4=16px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 20=80px, 24=96px
// Extend for larger sections
'112': '28rem', // 448px (= 56 units of 8px)
'128': '32rem', // 512px
'160': '40rem', // 640px
'192': '48rem', // 768px
'224': '56rem', // 896px
'256': '64rem', // 1024px
}ค่าแบบกำหนดเองเป็นอีกทางเลือกหนึ่ง
เมื่อคุณต้องการค่าระยะห่างที่ใช้เพียงครั้งเดียวและไม่ต้องการเพิ่มสิ่งที่ไม่จำเป็นลงในการตั้งค่า ให้ใช้ไวยากรณ์ ค่าแบบกำหนดเอง ของ Tailwind โดยใช้วงเล็บเหลี่ยม: p-[22px], w-[347px], mt-[3.75rem] วิธีนี้จะสร้างค่า CSS ที่ตรงตามระบุโดยไม่เพิ่มลงในการตั้งค่า ค่าแบบกำหนดเองเหมาะสำหรับการแทนที่ที่ใช้ครั้งเดียว แต่ไม่ควรใช้จนเป็นนิสัย หากใช้ค่าเดียวกันตั้งแต่สามครั้งขึ้นไป ให้เพิ่มค่านั้นลงในการตั้งค่าแทน
<!-- Arbitrary values for truly one-off sizes -->
<div class="p-[22px] w-[347px] mt-[3.75rem]">
One-off dimensions from design spec
</div>
<!-- Prefer config-based values for repeated use -->
<!-- BAD: p-[22px] used in 15 components -->
<!-- GOOD: Add '22': '1.375rem' to spacing config, use p-22 everywhere -->การจัดทำเอกสารระบบระยะห่าง
เมื่อระยะห่างแบบกำหนดเองของคุณเพิ่มขึ้น ให้จัดทำเอกสารควบคู่กับโทเค็นสีและตัวอักษร สร้างข้อมูลอ้างอิงระยะห่างแบบภาพอย่างง่ายใน Storybook เอกสารระบบการออกแบบ หรือแม้แต่หน้า HTML แบบคงที่ที่แสดงค่าแต่ละค่าเป็นบล็อกสี วิธีนี้ช่วยให้นักออกแบบและนักพัฒนาเลือกใช้ค่าที่ถูกต้องจากการตั้งค่า แทนการเลือกค่าแบบกำหนดเองหรือค่าที่ใช้เฉพาะจุดอย่างไม่สม่ำเสมอ
<!-- Simple spacing token preview -->
<div class="space-y-2">
<div class="flex items-center gap-4">
<div class="bg-blue-200 h-4" style="width: 1.125rem;"></div>
<span class="text-sm font-mono">spacing.4.5 = 1.125rem (18px)</span>
</div>
<div class="flex items-center gap-4">
<div class="bg-blue-400 h-4" style="width: 3.25rem;"></div>
<span class="text-sm font-mono">spacing.13 = 3.25rem (52px)</span>
</div>
</div>ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับค่าระยะห่างแบบกำหนดเองใน Tailwind CSS
ทบทวนบทเรียน
ในบทเรียนนี้ คุณได้เรียนรู้ว่า การเพิ่มระยะห่างแบบกำหนดเองใน theme.extend.spacing จะช่วยขยายสเกลเริ่มต้นโดยไม่แทนที่สเกลเดิม ระยะห่างแบบกำหนดเองจะใช้งานได้โดยอัตโนมัติกับ ยูทิลิตีระยะห่างทั้งหมด (padding, margin, width, height, gap) และ ค่าแบบกำหนดเอง ที่ใช้รูปแบบวงเล็บเหลี่ยมก็เป็นทางเลือกที่ดีสำหรับการวัดค่าที่ใช้เพียงครั้งเดียวจริง ๆ ต่อไป เราจะสำรวจพร็อพเพอร์ตีแบบกำหนดเองของ CSS ในฐานะโทเค็นการออกแบบของ Tailwind
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “ค่าระยะห่างแบบกำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ค่าระยะห่างแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ค่าระยะห่างแบบกำหนดเอง”
เพิ่มค่าระยะห่างเฉพาะโครงการ เช่น spacing.18 หรือ spacing.128 ลงในธีม เพื่อเติมช่องว่างในมาตราส่วนเริ่มต้น คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ค่าระยะห่างแบบกำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม
ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเพิ่มสีแบบกำหนดเอง
- ตระกูลฟอนต์แบบกำหนดเอง
- ค่าระยะห่างแบบกำหนดเอง
- การใช้ตัวแปร CSS ใน Tailwind