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

Tailwind CSS در دنیای واقعی: معماری نگهبان (Gatekeeper Architecture)

سازمان‌های بزرگ اجازه نمی‌دهند همه افراد هر صفحه‌ای را استایل‌دهی کنند. آن‌ها از ساختار خاصی برای تمیز نگه داشتن کد خود استفاده می‌کنند.

سیستم‌های طراحی بالغ مانند Shopify Polaris از دو نقش مجزا استفاده می‌کنند:

  • نویسندگان کامپوننت (نگهبانان): این تیم رابط کاربری (UI) اصلی را می‌سازد. آن‌ها کلاس‌های Tailwind را می‌نویسند و مسئولیت مدیریت دسترسی‌پذیری (accessibility)، حالت تاریک (dark mode) و توکن‌های طراحی (design tokens) را بر عهده دارند.

  • توسعه‌دهندگان ویژگی (تجمیع‌کنندگان): این تیم محصولات و داشبوردها را می‌سازد. تمرکز آن‌ها بر منطق تجاری (business logic) و چیدمان (layout) است. آن‌ها رنگ‌ها یا فاصله‌گذاری‌ها را انتخاب نمی‌کنند.

سازمان‌ها این مرز را با استفاده از قوانین lint و بازبینی کد (code reviews) اعمال می‌کنند.

کارهایی که باید انجام دهید: • از ابزارهای چیدمان مانند flex ،grid و gap استفاده کنید.

کارهایی که باید از آن‌ها اجتناب کنید: • اضافه کردن استایل‌های بصری جدید مانند bg-indigo-600 یا text-lg مستقیماً در صفحات ویژگی‌ها. در عوض، از یک کامپوننت موجود استفاده کنید.

در اینجا نحوه عملکرد آن در کد آمده است.

تیم سیستم طراحی، یک دکمه قابل استفاده مجدد در @/components/ui/button.tsx ایجاد می‌کند. آن‌ها استایل‌های بصری را متمرکز می‌کنند:

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>
  );
}

سپس توسعه‌دهنده ویژگی، صفحه را با تجمیع این بلوک‌ها می‌سازد:

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

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

این ساختار سه مزیت اصلی دارد:

  1. نگهداری آسان‌تر. اگر یک دکمه را حذف کنید، CSS بلااستفاده (dead CSS) باقی نمی‌ماند.
  2. به‌روزرسانی سریع. اگر برند شما از رنگ indigo به violet تغییر کند، تنها یک فایل را تغییر می‌دهید و این تغییر در کل اپلیکیشن اعمال می‌شود.
  3. یکپارچگی. هر توسعه‌دهنده از توکن‌های طراحی یکسان استفاده می‌کند.

هدف تنها مربوط به Tailwind نیست؛ بلکه ایجاد مرزی میان کسانی است که سیستم را می‌سازند و کسانی که از آن استفاده می‌کنند.

در بخش دوم، درباره نحوه مدیریت استثناهای طراحی بدون آسیب رساندن به معماری خود بحث خواهم کرد.

منبع: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36