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

Theme و سفارشی‌سازی

Theme Variable در Tailwind CSS 4

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

محتوای درس Theme Variable در Tailwind CSS 4

Theme Variable در Tailwind CSS 4 را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

Theme Variable در Tailwind CSS 4 هم Design Token تعریف می‌کند و هم Utility مرتبط می‌سازد. Arbitrary Value برای مقدارهای استثنایی مناسب است؛ مقدار پرتکرار باید به Token نام‌دار تبدیل شود.

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

  1. رنگ، Font، Radius و Shadow پرتکرار را شناسایی کنید.
  2. Tokenها را در @theme تعریف کنید.
  3. Arbitrary Value را فقط برای نیاز محلی و واقعاً یکتا نگه دارید.

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

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

app.css
@import "tailwindcss";

@theme {
  --color-brand-500: #f5a623;
  --color-brand-700: #c97800;
  --font-sans: "Vazirmatn", sans-serif;
}

@layer base {
  body { font-family: var(--font-sans); }
}

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

Utilityهایی مثل bg-brand-500 و text-brand-700 قابل استفاده می‌شوند.

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

  • نام Token را بر اساس رنگ ظاهری و نه نقش آن انتخاب نکنید.
  • تکرار مقدارهای دلخواه Design System را پراکنده می‌کند.

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

یک Token برای Surface و یک Breakpoint سفارشی تعریف و در مثال استفاده کنید.

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