Tailwind Config

Config ด้านล่าง map ค่าตรงจาก tokens/bgrimm.tokens.json — ใช้เป็นจุดเริ่มต้นสำหรับโปรเจกต์ Tailwind ใดก็ตามที่ต้องใช้ดีไซน์ B.Grimm

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{ts,tsx,html}'],
  theme: {
    extend: {
      colors: {
        bgrimm: {
          orange: { 400: '#FF9956', 500: '#FF6727', 700: '#C43400' },
          grey:   { 100: '#EBECF0', 200: '#D9DAE4', 300: '#C9CAD4', 400: '#989AA5', 600: '#63666F', 900: '#202124' },
          white:  '#FFFFFF',
          offwhite: '#FCFEFF',
        },
      },
      fontFamily: {
        heading: ["'Source Serif Pro'", "'Times New Roman'", 'serif'],
        body: ["'Noto Sans Thai'", "'Open Sans'", 'Arial', 'sans-serif'],
        'formal-th-heading': ["'Sarabun'", 'Arial', 'sans-serif'],
        'formal-th-body': ["'Kanit'", 'Arial', 'sans-serif'],
        'formal-letter': ["'Browallia New'", "'Angsana New'", 'Tahoma', 'serif'],
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '16px',
      },
      boxShadow: {
        'elevation-1': '0 1px 2px rgba(32, 33, 36, 0.06)',
        'elevation-2': '0 4px 8px rgba(32, 33, 36, 0.08)',
        'elevation-3': '0 8px 24px rgba(32, 33, 36, 0.12)',
      },
    },
  },
  plugins: [],
};

export default config;

หมายเหตุ

• Spacing ไม่ override — สเกล default ของ Tailwind (4px step) ตรงกับ space.* token ของ B.Grimm อยู่แล้วพอดี (p-4 = 16px = space.4) จึงไม่ต้อง extend เพิ่ม
• ตั้งชื่อสีภายใต้ namespace bgrimm.* เสมอ (ไม่ override orange/gray ของ Tailwind ตรงๆ) เพื่อไม่ให้ปนกับสี default ที่โปรเจกต์อื่นอาจใช้อยู่
• ไม่มี plugin/preset เพิ่มเติมนอกเหนือจาก Tailwind core — ยังไม่จำเป็นต้องใช้ @tailwindcss/forms หรือ plugin อื่นสำหรับ pattern ปัจจุบัน

ตัวอย่างการใช้ class จริงดูที่ Usage Patterns