𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗧𝗵𝗲 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲

องค์กรขนาดใหญ่ไม่ได้ปล่อยให้ทุกคนกำหนดสไตล์ให้กับทุกหน้าได้ตามใจชอบ พวกเขาใช้โครงสร้างเฉพาะเพื่อรักษาโค้ดให้สะอาดและเป็นระเบียบ

ระบบการออกแบบ (Design Systems) ที่มีความสมบูรณ์แบบอย่าง Shopify Polaris จะแบ่งบทบาทออกเป็นสองส่วนที่แยกจากกัน:

  • Component Authors (ผู้ดูแล - The Gatekeepers): ทีมนี้มีหน้าที่สร้าง UI หลัก พวกเขาเป็นคนเขียน Tailwind classes และจัดการเรื่อง accessibility, dark mode และ design tokens

  • Feature Developers (ผู้ประกอบ - The Assemblers): ทีมนี้มีหน้าที่สร้างผลิตภัณฑ์และแดชบอร์ด โดยจะเน้นไปที่ business logic และ layout พวกเขาจะไม่เป็นคนเลือกสีหรือระยะห่าง (spacing) เอง

องค์กรจะบังคับใช้ขอบเขตนี้ด้วย lint rules และการทำ code reviews

สิ่งที่คุณควรทำ: • ใช้ layout utilities เช่น flex, grid และ gap

สิ่งที่คุณควรหลีกเลี่ยง: • การเพิ่ม visual styles ใหม่ๆ เช่น bg-indigo-600 หรือ text-lg ลงในหน้า feature โดยตรง ควรใช้ component ที่มีอยู่แล้วแทน

นี่คือตัวอย่างการทำงานในรูปแบบของโค้ด

ทีม Design System จะสร้างปุ่มที่นำกลับมาใช้ใหม่ได้ใน @/components/ui/button.tsx โดยรวบรวม visual styles ไว้ที่ส่วนกลาง:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  className?: string;
}

export function Button({
  variant = 'primary',
  className = '',
  children,
  ...props
}: ButtonProps) {
  const baseStyles = "px-4 py-2 rounded-lg font-medium text-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";

  const variants = {
    primary: "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500",
    secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-500"
  };

  return (
    <button className={`${baseStyles} ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
}

จากนั้น Feature Developer จะสร้างหน้าเว็บโดยการนำบล็อกเหล่านี้มาประกอบกัน:

import { Button } from "@/components/ui/button";

export default function Dashboard() {
  return (
    <div>
      <Button variant="primary" className="mt-4">
        Save Changes
      </Button>
    </div>
  );
}

โครงสร้างนี้ให้ประโยชน์หลัก 3 ประการ:

  1. บำรุงรักษาง่ายขึ้น หากคุณลบปุ่มออก คุณจะไม่ทิ้ง CSS ที่ไม่ได้ใช้งาน (dead CSS) ไว้ในระบบ
  2. อัปเดตได้รวดเร็ว หากแบรนด์ของคุณเปลี่ยนจากสี indigo เป็น violet คุณเพียงแค่เปลี่ยนไฟล์เดียว และการเปลี่ยนแปลงนั้นจะส่งผลไปทั่วทั้งแอปพลิเคชัน
  3. ความสม่ำเสมอ (Consistency) นักพัฒนาทุกคนจะใช้ design tokens ชุดเดียวกัน

เป้าหมายไม่ใช่แค่เรื่องของ Tailwind เท่านั้น แต่มันคือการสร้างขอบเขตระหว่างผู้ที่สร้างระบบและผู้ที่ใช้งานระบบ

ในส่วนที่ 2 ผมจะพูดถึงวิธีการจัดการกับข้อยกเว้นในการออกแบบโดยไม่ทำให้สถาปัตยกรรมของคุณเสียหาย

ที่มา: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36