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

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

Arbitrary Value و Custom Property

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

محتوای درس Arbitrary Value و Custom Property

Arbitrary Value و Custom Property را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

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

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

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

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

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

index.html
<div class="grid grid-cols-[260px_1fr] gap-[18px]">
  <aside class="bg-[var(--sidebar-bg)]">Sidebar</aside>
  <main>Main</main>
</div>

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

Grid با اندازه سفارشی و CSS Variable.

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

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

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

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

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