การปรับแต่ง Tailwind CSS ให้ตรงตาม Design System หรือ CI ( Corporate Identity ) ของบริษัทเป็นขั้นตอนสำคัญเพื่อให้ UI ของเรามีความสม่ำเสมอ ( Consistency ) และประหยัดเวลาในการเขียน CSS ซ้ำ ๆ
โครงสร้างไฟล์ tailwind.config.js
เราจะเน้นไปที่การขยาย ( Extend ) ค่ามาตรฐานของ 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: [],
}
การนำไปใช้งาน ( Usage )
เมื่อเรากำหนดในไฟล์คอนฟิกแล้ว เราสามารถเรียกใช้ผ่าน Class name ได้ทันที ซึ่งจะช่วยให้ Developer ทุกคนในทีมใช้โค้ดชุดเดียวกัน
- สีพื้นหลัง:
bg-brand-primary - สีข้อความ:
text-brand-dark - ฟอนต์:
font-heading - ขอบมน:
rounded-brand
การทำ Shared Component ( Best Practice )
สำหรับส่วนประกอบที่ใช้บ่อย เช่น ปุ่ม ( Buttons ) แนะนำให้สร้างเป็น 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 ดูสมดุล |
อ่านเพิ่มเติม