Usage Patterns

ใช้ config จาก Tailwind Config — ตัวอย่าง component จริงตามสเปกใน Design System → Buttons & Cards

Utility Class Convention

• ใช้ class จาก namespace bgrimm-* เท่านั้นสำหรับสี — ห้ามใช้ text-orange-500, bg-gray-600 ของ Tailwind default เพราะเฉดสีจะไม่ตรงกับแบรนด์
• ลำดับ class: Layout → Spacing → Typography → Color → State (flex items-center gap-2 p-4 text-sm font-bold text-bgrimm-white bg-bgrimm-orange-500 hover:bg-bgrimm-orange-700) เพื่อให้อ่าน diff ง่ายเวลารีวิวโค้ด
• Responsive prefix (md:, lg:) วางท้ายสุดของแต่ละกลุ่ม ไม่ใช่กระจายทั้ง string

Button

<button class="
  inline-flex items-center justify-center
  px-4 py-2 rounded-md
  font-body font-bold text-sm text-bgrimm-white
  bg-bgrimm-orange-500 hover:bg-bgrimm-orange-700
  disabled:bg-bgrimm-grey-400 disabled:cursor-not-allowed
  transition-colors
">
  ดูรายละเอียด
</button>

<!-- Secondary -->
<button class="
  inline-flex items-center justify-center
  px-4 py-2 rounded-md border border-bgrimm-orange-500
  font-body font-bold text-sm text-bgrimm-orange-700
  hover:bg-bgrimm-orange-500/10
">
  ดูเพิ่มเติม
</button>

Card

<div class="
  rounded-lg border border-bgrimm-grey-200 bg-white
  p-6 shadow-elevation-1 hover:shadow-elevation-2
  transition-shadow
">
  <h3 class="font-heading text-xl text-bgrimm-grey-900">หัวข้อการ์ด</h3>
  <p class="mt-2 font-body text-base text-bgrimm-grey-600">เนื้อหาอธิบายสั้นๆ ใต้หัวข้อ</p>
</div>

อย่าลืม dark mode

ถ้าโปรเจกต์เปิดใช้ dark: variant ของ Tailwind ให้ผูกกับ dark-mode palette เดียวกับที่ custom.css ของเว็บไซต์นี้ใช้ (เช่น primary กลายเป็น #FF9956 ใน dark mode) — รายละเอียดยังไม่ถูกผูกเข้า token file อย่างเป็นทางการ ดูหมายเหตุที่ Figma Variables Setup