หมวดหมู่: Design

การปรับแต่ง 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

อ่านเพิ่มเติม

• Corporate Identity ( CI ) คือ
• Corporate Identity ( CI ): ทำไม่ DEV, Designer ต้องรู้
• Bootstrap: แก้ให้ตรงตาม Corporate Identity ( CI ) ของแบรนด์