การใช้งาน Arbitrary Values ใน Tailwind CSS

ในบทเรียนที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้งาน Variants ใน Tailwind CSS เพื่อปรับแต่งสไตล์ตามสถานะต่างๆ ของ element ในบทนี้ เราจะมาเจาะลึกถึงอีกหนึ่งฟีเจอร์ที่ทรงพลังของ Tailwind CSS นั่นคือ Arbitrary Values ซึ่งช่วยให้เราสามารถกำหนดค่า CSS ที่ไม่ได้ถูกกำหนดไว้ล่วงหน้าใน Tailwind configuration ได้โดยตรงใน HTML

Arbitrary Values คืออะไร?

Tailwind CSS มาพร้อมกับ utility classes มากมายที่ครอบคลุมการใช้งานทั่วไป แต่บางครั้งเราอาจต้องการกำหนดค่า CSS ที่เฉพาะเจาะจง ซึ่งไม่ได้อยู่ในชุดค่าเริ่มต้นของ Tailwind CSS นี่คือจุดที่ Arbitrary Values เข้ามามีบทบาท

Arbitrary Values คือการที่เราสามารถกำหนดค่า CSS ที่ต้องการได้โดยตรงใน HTML โดยใช้ square bracket notation ([]) ร่วมกับชื่อของ property ที่ต้องการปรับแต่ง

การใช้งาน Square Bracket Notation

รูปแบบการใช้งาน Arbitrary Values นั้นง่ายมาก เพียงแค่ใส่ค่าที่ต้องการลงใน square brackets ต่อท้ายชื่อ utility class ที่ต้องการปรับแต่ง ตัวอย่างเช่น หากเราต้องการกำหนดความกว้างของ element เป็น 123px เราสามารถทำได้ดังนี้:

<div class="w-[123px]">
  <!-- เนื้อหาของ div -->
</div>

ในตัวอย่างนี้ w- คือ utility class สำหรับกำหนดความกว้าง (width) และ [123px] คือ Arbitrary Value ที่กำหนดความกว้างเป็น 123 พิกเซล

ตัวอย่างการใช้งาน Arbitrary Values

ลองมาดูตัวอย่างการใช้งาน Arbitrary Values ในสถานการณ์ต่างๆ:

1. การกำหนดขนาด Font ที่กำหนดเอง

สมมติว่าเราต้องการกำหนดขนาด font เป็น 22px ซึ่งไม่ได้อยู่ในขนาด font ที่ predefined ใน Tailwind CSS เราสามารถทำได้ดังนี้:

<p class="text-[22px]">ข้อความขนาด 22px</p>

2. การกำหนด Letter Spacing ที่กำหนดเอง

หากเราต้องการเพิ่ม letter spacing เป็น 0.3em เราสามารถทำได้ดังนี้:

<p class="tracking-[0.3em]">ข้อความที่มี letter spacing 0.3em</p>

3. การกำหนด Box Shadow ที่กำหนดเอง

เราสามารถกำหนด box shadow ที่ซับซ้อนได้โดยใช้ Arbitrary Values:

<div class="shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
  <!-- เนื้อหาของ div ที่มี box shadow -->
</div>

4. การกำหนด Border Radius ที่กำหนดเอง

กำหนด border radius ที่ไม่เป็นไปตามค่ามาตรฐาน:

<div class="rounded-[15px]">
  <!-- เนื้อหาของ div ที่มี border radius 15px -->
</div>

ข้อดีและข้อเสียของการใช้งาน Arbitrary Values

การใช้งาน Arbitrary Values มีทั้งข้อดีและข้อเสียที่ควรพิจารณา:

ข้อดี:

ความยืดหยุ่น: ช่วยให้เราสามารถกำหนดค่า CSS ที่เฉพาะเจาะจงได้ตามต้องการ โดยไม่ต้องแก้ไข Tailwind configuration file
ความรวดเร็ว: สามารถปรับแต่งสไตล์ได้อย่างรวดเร็ว โดยไม่ต้องเสียเวลาเพิ่ม utility classes ใหม่ใน configuration
การทดลอง: เหมาะสำหรับการทดลองสไตล์ใหม่ๆ อย่างรวดเร็ว เพื่อดูว่าค่าใดเหมาะสมที่สุด

ข้อเสีย:

ความไม่สอดคล้อง: อาจทำให้เกิดความไม่สอดคล้องกันในสไตล์ หากไม่ได้กำหนดค่าอย่างระมัดระวัง
ความซับซ้อน: การใช้ Arbitrary Values มากเกินไปอาจทำให้ HTML code อ่านยากและซับซ้อน
การบำรุงรักษา: การแก้ไขและบำรุงรักษาโค้ดที่มี Arbitrary Values จำนวนมากอาจเป็นเรื่องยาก
PurgeCSS: PurgeCSS อาจไม่สามารถตรวจจับ Arbitrary Values ที่ไม่ได้ใช้งาน ทำให้ไฟล์ CSS มีขนาดใหญ่ขึ้น (แก้ไขได้โดยการกำหนดค่า PurgeCSS ให้ถูกต้อง)

กรณีการใช้งานที่เหมาะสม

Arbitrary Values เหมาะสำหรับการใช้งานในกรณีต่อไปนี้:

การแก้ไขสไตล์เฉพาะหน้า: เมื่อต้องการปรับแต่งสไตล์ของ element เพียงไม่กี่ element ในหน้าเดียว
การทดลองสไตล์: เมื่อต้องการทดลองสไตล์ใหม่ๆ อย่างรวดเร็วเพื่อหาค่าที่เหมาะสม
การใช้งานค่าที่ไม่ซ้ำ: เมื่อต้องการใช้ค่าที่ไม่ซ้ำกันในหลายๆ ที่ และไม่ต้องการสร้าง utility classes ใหม่สำหรับค่าเหล่านั้น
การใช้งานกับ Plugins: เมื่อใช้ plugins ที่ต้องการค่า CSS ที่เฉพาะเจาะจง

ข้อควรระวังในการใช้งาน

ถึงแม้ว่า Arbitrary Values จะมีประโยชน์ แต่ก็ควรใช้งานอย่างระมัดระวัง เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้น:

ใช้เท่าที่จำเป็น: พยายามใช้ utility classes ที่ predefined ใน Tailwind CSS ให้มากที่สุดก่อนพิจารณาใช้ Arbitrary Values
สร้าง utility classes ใหม่: หากต้องการใช้ค่า CSS ที่ซ้ำกันในหลายๆ ที่ ควรสร้าง utility classes ใหม่ใน Tailwind configuration file แทนการใช้ Arbitrary Values ซ้ำๆ
จัดระเบียบโค้ด: พยายามจัดระเบียบโค้ด HTML ให้เป็นระเบียบ เพื่อให้ง่ายต่อการอ่านและบำรุงรักษา
Comment code: ใส่ comment อธิบายเหตุผลในการใช้ Arbitrary Values เพื่อให้ผู้อื่นเข้าใจได้ง่ายขึ้น

การใช้งาน Arbitrary Values ร่วมกับ Variants

เราสามารถใช้ Arbitrary Values ร่วมกับ Variants ได้เช่นเดียวกับการใช้ utility classes ปกติ ตัวอย่างเช่น หากเราต้องการเปลี่ยนสีพื้นหลังเป็นสีแดงเมื่อ hover เราสามารถทำได้ดังนี้:

<div class="hover:bg-[#ff0000]">
  <!-- เนื้อหาของ div -->
</div>

ในตัวอย่างนี้ hover: คือ variant สำหรับสถานะ hover และ bg-[#ff0000] คือ Arbitrary Value ที่กำหนดสีพื้นหลังเป็นสีแดง (#ff0000) เมื่อ hover

สรุป

Arbitrary Values เป็นเครื่องมือที่มีประโยชน์ในการปรับแต่งสไตล์ใน Tailwind CSS อย่างรวดเร็วและยืดหยุ่น อย่างไรก็ตาม ควรใช้งานอย่างระมัดระวังและใช้เท่าที่จำเป็น เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้น การใช้ utility classes ที่ predefined ใน Tailwind CSS ให้มากที่สุด และการสร้าง utility classes ใหม่เมื่อต้องการใช้ค่า CSS ที่ซ้ำกันในหลายๆ ที่ จะช่วยให้โค้ดของเรามีความสอดคล้องกัน และง่ายต่อการบำรุงรักษามากขึ้น

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการสร้าง Custom Utilities ด้วย @layer utilities ซึ่งเป็นอีกวิธีหนึ่งในการขยาย Tailwind CSS และสร้าง utility classes ที่กำหนดเอง