การปรับแต่ง Tailwind CSS ให้ตรงตาม Design System หรือ CI ของบริษัทเป็นขั้นตอนสำคัญเพื่อให้ UI ของเรามีความสม่ำเสมอ และประหยัดเวลาในการเขียน CSS ซ้ำ ๆ
โครงสร้างไฟล์ tailwind.config.js
เราจะเน้นไปที่การขยาย ค่ามาตรฐานของ Tailwind เพื่อให้เรายังสามารถใช้ Utility classes เดิมได้ แต่เพิ่มสีหรือฟอนต์ของบริษัทเข้าไป
/** @type {import ('tailwindcss') .Config} */
module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { // 1. กำหนดสีประจำบริษัท (Brand Colors) colors: { brand: { primary: '#0055FF', // สีหลัก secondary: '#6C757D', // สีรอง accent: '#FFD700', // สีเน้น dark: '#1A1A1A', light: '#F8F9FA', }, }, // 2. กำหนดฟอนต์ (Typography) fontFamily: { sans: ['"Prompt"', 'sans-serif'], // ฟอนต์หลักของบริษัท heading: ['"Kanit"', 'sans-serif'], }, // 3. กำหนดระยะห่างหรือขนาดที่ใช้บ่อย (Spacing/Border Radius) borderRadius: { 'brand': '12px', } }, }, plugins: [],
}
การนำไปใช้งาน
เมื่อเรากำหนดในไฟล์คอนฟิกแล้ว เราสามารถเรียกใช้ผ่าน Class name ได้ทันที ซึ่งจะช่วยให้ Developer ทุกคนในทีมใช้โค้ดชุดเดียวกัน
- สีพื้นหลัง:
bg-brand-primary - สีข้อความ:
text-brand-dark - ฟอนต์:
font-heading - ขอบมน:
rounded-brand
การทำ Shared Component
สำหรับส่วนประกอบที่ใช้บ่อย เช่น ปุ่ม แนะนำให้สร้างเป็น Base Style ในไฟล์ CSS หลัก (globals.css) เพื่อลดความยาวของ class ใน HTML
@layer components { .btn-primary { @apply bg-brand-primary text-white px-6 py-2 rounded-brand hover:bg-opacity-90 transition-all; }
}
ข้อควรระวังในการปรับ CI
| หัวข้อ | สิ่งที่ควรทำ |
| Color Naming | ใช้ชื่อกลาง ๆ เช่น primary, secondary แทนการตั้งชื่อตามสี เช่น blue-dark เพื่อให้ง่ายต่อการ Rebrand ในอนาคต |
| Dark Mode | หาก CI มีกำหนดสี Dark Mode ให้ใช้ dark: variant ร่วมกับสีแบรนด์ |
| Spacing | พยายามอิงตาม Scale ของ Tailwind (4, 8, 12, 16) เพื่อให้ Layout ดูสมดุล |
อ่านเพิ่มเติม