การปรับแต่ง Tailwind CSS ให้ตรงตาม Design System หรือ CI ของบริษัทเป็นขั้นตอนสำคัญเพื่อให้ UI ของเรามีความสม่ำเสมอ และประหยัดเวลาในการเขียน CSS ซ้ำ ๆ
โครงสร้างไฟล์ tailwind.config.js
เราจะเน้นไปที่การขยาย ค่ามาตรฐานของ Tailwind เพื่อให้เรายังสามารถใช้ Utility classes เดิมได้ แต่เพิ่มสีหรือฟอนต์ของบริษัทเข้าไป
JavaScript
/** @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: [],
}