CSS
Tailwind Essentials
Tailwind arbitrary values & special properties
เรียนรู้การใช้ bracket syntax ใน Tailwind v4 สำหรับ arbitrary values, arbitrary properties และ grid-template-areas เมื่อ utility มาตรฐานยังไม่พอดีกับงาน
เมื่อ scale ที่มีไม่พอ ให้ใช้ arbitrary values
Tailwind ปกติจะอยากให้เราใช้ scale ที่มีอยู่แล้วก่อน เช่น text-sm, text-base, p-4 หรือ w-64 เพราะอ่านง่ายและคุมดีไซน์ให้สม่ำเสมอ แต่ถ้าค่าที่มีอยู่ไม่พอดีกับงานจริง เราสามารถใช้ arbitrary values ผ่านวงเล็บเหลี่ยมได้ เช่น text-[14px], w-[37px], rounded-[10px] หรือ bg-[#1e293b]
- เริ่มจาก class มาตรฐานก่อนเสมอ เพราะอ่านง่ายและใช้ซ้ำง่าย
- ถ้าต้องจูนค่าเฉพาะจุดจริง ๆ ค่อยใช้ [] เช่น text-[14px]
- ถ้าค่าเดิมถูกใช้ซ้ำหลายที่ ให้ย้ายไปกำหนดใน @theme แทน
syntax แบบ [] ใช้ใส่ค่าที่ไม่อยู่ใน scale ได้โดยไม่ต้องออกไปเขียน CSS แยก
<p class="text-sm">scale ที่ Tailwind มีให้</p>
<p class="text-[14px]">กำหนดขนาดเฉพาะจุด</p>
<div class="w-[37px] rounded-[10px] bg-[#1e293b]"></div>arbitrary values ใช้ได้หลาย property ไม่ใช่แค่ text
arbitrary values ใช้ได้กับหลายกลุ่ม property เช่น typography, spacing, sizing, color, shadow และ layout จุดสำคัญคือมันช่วยให้เราปรับค่าได้แม่นขึ้น แต่ก็แลกกับความยาวของ class และความสม่ำเสมอที่อาจลดลงถ้าใช้พร่ำเพรื่อ
| งาน | scale ปกติ | arbitrary value |
|---|---|---|
| font size | text-sm | text-[14px] |
| width | w-10 | w-[37px] |
| radius | rounded-lg | rounded-[10px] |
| background | bg-slate-800 | bg-[#1e293b] |
| shadow | shadow-sm | shadow-[0_12px_30px_rgba(15,23,42,0.18)] |
arbitrary properties สำหรับ property ที่ Tailwind ไม่มีชื่อให้
ถ้าเป็นกรณีที่ Tailwind ไม่มี utility ชื่อสำเร็จรูปให้เลย เราสามารถเขียนชื่อ property ลงไปด้วยได้ เช่น [scroll-margin-top:72px] หรือ [mask-type:luminance] จุดต่างจาก text-[14px] คือ arbitrary value เขียนแค่ค่า แต่ arbitrary property เขียนทั้ง property และ value ใน class เดียว
ใช้เมื่อ property นั้นไม่มี utility ชื่อให้ตรง ๆ และยังไม่คุ้มพอจะออกไปเขียน CSS แยก
<section class="[scroll-margin-top:72px]">
...
</section>
<svg class="[mask-type:luminance]">
...
</svg>ใช้ grid-template-areas ใน Tailwind
ในบท CSS Grid เราเคยใช้ grid-template-areas กับ grid-area มาแล้ว ถ้าอยากทำแบบเดียวกันใน Tailwind โดยไม่สร้าง CSS เพิ่ม เราสามารถใช้ arbitrary properties ได้ แนวคิดยังเหมือนเดิม: parent วาดแผนผังชื่อพื้นที่ ส่วน child แต่ละตัวใช้ grid-area บอกว่าจะไปอยู่ตำแหน่งไหน
เลือกให้ถูกระหว่าง arbitrary value, @theme, และ @layer
สามอย่างนี้แก้ปัญหาคนละแบบ ถ้าเลือกถูกจะช่วยให้โค้ดทั้งยืดหยุ่นและยังดูแลต่อได้ง่ายขึ้น
| เครื่องมือ | ใช้เมื่อ | ตัวอย่าง |
|---|---|---|
| arbitrary value | ค่าเฉพาะจุด ใช้ครั้งเดียวหรือใช้ไม่บ่อย | text-[14px], bg-[#1e293b] |
| @theme | ค่าที่ควรกลายเป็น token ใช้ซ้ำหลายจุด | --color-brand-500 แล้วใช้ bg-brand-500 |
| @layer | ต้องการ component class หรือ utility ที่ใช้ซ้ำ | .btn-primary หรือ .content-auto |
สรุปสั้น ๆ คือ ถ้าแค่จูนเฉพาะจุดให้ใช้ [] ได้เลย แต่ถ้าเริ่มใช้ค่าซ้ำหลายที่ ควรย้ายไป @theme และถ้าต้องรวมหลาย style เป็นชิ้น UI หรือ utility ที่เรียกซ้ำ ให้ใช้ @layer แทน