บทความนี้จะอธิบาย:
- หน้าจอ สี และการเว้นวรรคทำอะไรได้บ้างในธีม Tailwind
- วิธีใช้หน้าจอ สี และการเว้นวรรคในธีม Tailwind
- วิธีกำหนดค่าหน้าจอ สี และระยะห่างในธีม Tailwind
หน้าจอ สี และการเว้นวรรคทำอะไรได้บ้างในธีม Tailwind
เดอะ หน้าจอ คีย์อนุญาตให้ผู้ใช้แก้ไขเบรกพอยต์ที่ตอบสนองในโครงการ Tailwind จุดพักคือจุดที่เลย์เอาต์เปลี่ยนไปตามความกว้างของหน้าจอ โดยค่าเริ่มต้น Tailwind จะมีห้าหน้าจอ ได้แก่ sm (เล็ก), md (กลาง), lg (ใหญ่) และ xl (ใหญ่พิเศษ) อย่างไรก็ตาม ผู้ใช้สามารถกำหนดจุดพักได้โดยใช้ปุ่ม 'หน้าจอ' แล้วใช้ในโปรแกรม HTML
สี ปุ่มใช้เพื่อปรับเปลี่ยนจานสี สีเป็นหนึ่งในคุณสมบัติที่สำคัญที่สุดของการออกแบบ ธีม Tailwind มีจานสีเริ่มต้นที่มีเฉดสีให้เลือกมากมาย แต่ผู้ใช้ยังสามารถปรับแต่งหรือขยายสีได้ด้วย ผู้ใช้สามารถกำหนดสีโดยใช้ปุ่ม 'สี' จากนั้นใช้กับคลาสยูทิลิตี้ที่เกี่ยวข้องกับสีในโค้ด HTML
เดอะ ระยะห่าง คีย์ใช้เพื่อปรับเปลี่ยนระยะห่างและมาตราส่วนการปรับขนาด การเว้นวรรคเป็นองค์ประกอบสำคัญอีกประการหนึ่งของการออกแบบ เนื่องจากส่งผลต่อความสามารถในการอ่าน การจัดตำแหน่ง และความสมดุลขององค์ประกอบต่างๆ ธีม Tailwind มีมาตราส่วนระยะห่างที่สอดคล้องกันโดยอิงจากค่าฐาน 4 พิกเซล (0.25rem) อย่างไรก็ตาม ยังสามารถปรับแต่งหรือขยายได้ด้วยค่าที่กำหนดเอง ผู้ใช้สามารถกำหนดค่าระยะห่างโดยใช้ปุ่ม 'ระยะห่าง' แล้วใช้กับคลาสยูทิลิตี้ที่เกี่ยวข้องกับระยะห่างในไฟล์โปรแกรม
วิธีใช้หน้าจอ สี และการเว้นวรรคในธีม Tailwind
หากต้องการใช้หน้าจอ สี และการเว้นวรรคในธีม Tailwind ให้สร้างโปรแกรม HTML และใช้คุณสมบัติหน้าจอ สี และการเว้นวรรคเริ่มต้นตามต้องการ จากนั้นเรียกใช้โปรแกรม HTML และดูหน้าเว็บ HTML ให้เราทำตามขั้นตอนด้านล่าง:
ขั้นตอนที่ 1: สร้างเว็บเพจ HTML
ขั้นแรก สร้างโปรแกรม HTML และใช้คุณสมบัติหน้าจอ สี และระยะห่างที่เป็นค่าเริ่มต้น:
<ร่างกาย ><คลาส div = 'h-screen p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-ชมพู-700 ' >
= 'text-3xl m-5 sm:text-white text-center' >
เคล็ดลับลินุกซ์!
>
= 'text-2xl m-5 md:text-white text-center' >
ยินดีต้อนรับสู่บทช่วยสอนนี้
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS ของ Tailwind
>
ยินดีต้อนรับสู่บทช่วยสอนนี้
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS ของ Tailwind
>
= 'text-2xl m-5 xl:text-white text-center' >
ธีม
>
>
>
ที่นี่:
- “ -p-10 ' และ ' ม.5 ” เป็นคุณสมบัติการเว้นวรรค
- “ เอสเอ็ม ”, “ นพ ”, “ แอลจี ', และ ' xl ” คือคุณสมบัติของหน้าจอ
- “ สีแดง-700 ”, “ สีฟ้า-600 ”, “ สีเขียว-500 ”, “ สีชมพู-700 ', และ ' สีขาว ” คือคุณสมบัติของสี
ขั้นตอนที่ 2: เรียกใช้โปรแกรม HTML
จากนั้น เรียกใช้โปรแกรม HTML เพื่อดูหน้าเว็บ HTML:
ในเอาต์พุตด้านบน คุณจะเห็นหน้าจอเริ่มต้น สี และคุณสมบัติการเว้นวรรค
วิธีกำหนดค่าหน้าจอ สี และระยะห่างในธีม Tailwind
หากต้องการกำหนดค่าหน้าจอ สี และระยะห่างในธีม Tailwind ให้ดูขั้นตอนที่ให้ไว้:
- เปิด ' tailwind.config.js ' ไฟล์.
- ไปที่ “ ธีม ” และปรับแต่งหน้าจอ สี และคุณสมบัติการเว้นวรรคตามต้องการ
- ใช้คุณสมบัติที่กำหนดเองในโปรแกรม HTML
- ดูหน้าเว็บ HTML เพื่อตรวจสอบ
ขั้นตอนที่ 1: กำหนดค่าหน้าจอ สี และการเว้นวรรคในไฟล์กำหนดค่า Tailwind
ใน ' ธีม ” ส่วนของ “ tailwind.config.js ” ปรับแต่งหน้าจอ สี และคุณสมบัติการเว้นวรรคตามความต้องการ ตัวอย่างเช่น เราได้ปรับแต่งคุณสมบัติเหล่านี้ดังต่อไปนี้:
โมดูล .ส่งออก = {เนื้อหา : [ './index.html' ] ,
ธีม : {
//ปรับแต่งหน้าจอ
หน้าจอ : {
เอสเอ็ม : '480px' ,
นพ : '668px' ,
แอลจี : '876px' ,
xl : '1100px' ,
} ,
//ปรับแต่งสี
สี : {
สีขาว : #ffffff ,
สีดำ : '#000000' ,
สีฟ้า : '#08609c' ,
สีเขียว : '#089c28' ,
สีแดง : '#9c0306' ,
สีเหลือง : '#ede60e' ,
สีชมพู : '#ed0e55' ,
} ,
//ปรับแต่งระยะห่าง
ระยะห่าง : {
พิกเซล : '1พิกเซล' ,
'0' : '0' ,
'1' : '0.25 รอบ' ,
'2' : '0.5 รอบ' ,
'3' : '0.75 รอบ' ,
'4' : '1 สิ่ง' ,
'5' : '1.25rem' ,
'6' : '1.5 ไมล์' ,
'8' : 'ทูเรม' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'ยี่สิบ' : '5rem' ,
}
} ,
} ;
ในรหัสนี้:
- “ หน้าจอ ” คุณสมบัติกำหนดจุดพักหน้าจอสำหรับขนาดต่างๆ มันให้นามแฝง (เช่น sm, md, lg, xl) และค่าที่เทียบเท่า
- “ สี คุณสมบัติ ” กำหนดสีที่กำหนดเองโดยใช้ชื่อและคู่ค่าเลขฐานสิบหก
- “ ระยะห่าง คุณสมบัติ ” ระบุค่าระยะห่างที่กำหนดเองสำหรับหลายขนาด ใช้นามแฝง (เช่น px, 0, 1, 2 เป็นต้น) เพื่อแสดงค่าระยะห่างเฉพาะในหน่วย 'rem'
ขั้นตอนที่ 2: ใช้คุณสมบัติที่กำหนดค่าในโปรแกรม HTML
ตอนนี้ ใช้คุณสมบัติที่กำหนดเองในโปรแกรม HTML:
<ร่างกาย ><คลาส div = 'h-หน้าจอ p-10 sm:bg-สีแดง md:bg-สีน้ำเงิน lg:bg-สีเขียว xl:bg-สีชมพู ' >
= 'text-3xl m-5 sm:text-white text-center' >
เคล็ดลับลินุกซ์!
>
= 'text-2xl m-5 md:text-white text-center' >
ยินดีต้อนรับสู่บทช่วยสอนนี้
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS ของ Tailwind
>
ยินดีต้อนรับสู่บทช่วยสอนนี้
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS ของ Tailwind
>
= 'text-2xl m-5 xl:text-white text-center' >
ธีม
>
>
>
ขั้นตอนที่ 3: ดูเว็บเพจ HTML
สุดท้าย ตรวจสอบผลลัพธ์โดยการดูหน้าเว็บ HTML:
สังเกตได้ว่าเนื้อหาของเว็บเพจเปลี่ยนไปตามคุณสมบัติหน้าจอ สี และระยะห่างที่กำหนด
บทสรุป
เดอะ หน้าจอ คีย์อนุญาตให้ผู้ใช้ปรับแต่ง/แก้ไขเบรกพอยต์ที่ตอบสนอง, the สี คีย์ใช้เพื่อปรับแต่งจานสีสำหรับโครงการและ ระยะห่าง ปุ่มนี้ใช้เพื่อปรับแต่งระยะห่างและมาตราส่วนการปรับขนาด นอกจากนี้ ผู้ใช้สามารถปรับแต่งคีย์หรือคุณสมบัติเหล่านี้ได้ตามความต้องการ บทความนี้อธิบายหน้าจอ สี และการเว้นวรรคในธีม Tailwind