فصل 26 از 27 درس 1 از 2

Best Practice و معماری Style

Design System و Tokenها

بخشی از آموزش جامع Tailwind CSS

محتوای درس Design System و Tokenها

Design System و Tokenها را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Design System مجموعه‌ای از Token، Component و قانون استفاده است. نگهداری کلاس‌ها با ترتیب ثابت، Variantهای محدود و حذف تکرار ساختاری بهتر می‌شود؛ کوتاه‌کردن افراطی رشته‌ها هدف اصلی نیست.

روش پیاده‌سازی

  1. Tokenهای رنگ، فاصله، Radius و Shadow را تعریف کنید.
  2. Base Style و Variantهای Component را جدا نگه دارید.
  3. قوانین نام‌گذاری و بازبینی Responsive و Accessibility را مستند کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

app.css
@theme {
  --color-brand-500: #f6a91a;
  --radius-card: 1rem;
  --shadow-card: 0 10px 30px rgb(15 23 42 / 0.08);
}

/* استفاده */
.card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

خروجی مورد انتظار

Tokenهای یکپارچه برای اجزای رابط.

نکات مهم و خطاهای رایج

  • Tokenهای هم‌معنا با نام‌های مختلف باعث واگرایی می‌شوند.
  • انتزاع زودهنگام Component انعطاف طراحی را کم می‌کند.

تمرین پیشنهادی

دو Component پروژه را با Token مشترک و Variantهای محدود بازنویسی کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS