หมวดหมู่: Tailwind CSS

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

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

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