Tailwind เป็นเฟรมเวิร์ก CSS ที่มีชุดของค่าที่กำหนดไว้ล่วงหน้าสำหรับคุณสมบัติต่างๆ เช่น สี ระยะห่าง ขนาดตัวอักษร เป็นต้น อย่างไรก็ตาม บางครั้งผู้ใช้อาจต้องการใช้ค่าที่ไม่รวมอยู่ในการกำหนดค่าเริ่มต้น เช่น ค่าที่กำหนดเอง สีหรือระยะขอบเฉพาะ ในสถานการณ์นี้ พวกเขาสามารถใช้ค่าที่กำหนดเองได้

บทความนี้จะอธิบายวิธีการใช้ค่าที่กำหนดเองใน Tailwind CSS

จะใช้ค่าที่กำหนดเองใน Tailwind ได้อย่างไร

ค่าที่กำหนดเองคือค่าที่กำหนดเองซึ่งเขียนได้โดยตรงในแอตทริบิวต์คลาส HTML โดยไม่ต้องกำหนดค่าในไฟล์การกำหนดค่า Tailwind โดยจะขึ้นต้นด้วยเครื่องหมายวงเล็บเหลี่ยม เช่น [24px], [2.5rem] เป็นต้น หากต้องการใช้ค่าที่กำหนดเองใน Tailwind ให้ใช้เครื่องหมายวงเล็บเหลี่ยมและระบุค่าที่กำหนดเองเพื่อสร้างคลาสยูทิลิตี้แบบไดนามิก

ตรวจสอบขั้นตอนด้านล่างเพื่อความเข้าใจที่ดีขึ้น:

ขั้นตอนที่ 1: ใช้ค่าตามอำเภอใจในโปรแกรม HTML

สร้างโปรแกรม HTML และใช้เครื่องหมายวงเล็บเหลี่ยมกับค่าที่กำหนดเองเพื่อสร้างคลาสที่ต้องการ ตัวอย่างเช่น เราได้ใช้ “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, และคลาสอื่นๆ:

ที่นี่:

• “bg-[#e9e516]” class กำหนดสีพื้นหลังของ
  เป็น “#e9e516” (สีเหลือง).
• “w-[600px]” class กำหนดความกว้างของ
  เป็น 600 พิกเซล
• “สูง-[400px]” คลาสใช้ความสูง 400 พิกเซลกับองค์ประกอบ
• “p-[13px]” class ตั้งค่าการเติมของ
  เป็น 13 พิกเซล
• “ม-[19px]” class กำหนดระยะขอบของ
  เป็น 19 พิกเซล

• “ข้อความ-[30px]” class กำหนดขนาดตัวอักษรขององค์ประกอบ

  เป็น 30 พิกเซล

• “ข้อความ-[#7405ab]” class กำหนดสีข้อความขององค์ประกอบ

  เป็นสีม่วง (#7405ab)

• “การติดตาม-[0.5rem]” คลาสใช้การเว้นวรรคตัวอักษรกับองค์ประกอบ 0.5 rem ถึง

ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์

เพื่อให้แน่ใจว่าค่าที่กำหนดเองทำงานอย่างถูกต้อง ดูหน้าเว็บ HTML:

เอาต์พุตด้านบนบ่งชี้ว่าค่าที่กำหนดเองทำงานอย่างถูกต้องตามที่กำหนดไว้

บทสรุป

หากต้องการใช้ค่าที่กำหนดเองใน Tailwind ให้ใช้เครื่องหมายวงเล็บเหลี่ยมกับค่าที่กำหนดเองในโปรแกรม HTML เพื่อสร้างคลาสแบบไดนามิก ผู้ใช้สามารถใช้ค่าสำหรับพร็อพเพอร์ตี้ใดๆ ที่ยอมรับค่าตัวเลขหรือสี เช่น ขนาดฟอนต์ สี ความกว้าง ความสูง ระยะขอบ การเติม ฯลฯ บทความนี้ได้อธิบายวิธีการใช้ค่าที่กำหนดเองใน Tailwind CSS