جلسه هجدهم - بررسی مفهوم directive‌ها و function‌ها و نحوه ایجاد کامپونت‌ها توسط layer components directive

⚡ Directive چیست؟
دستوراتی که تو فایل CSS وارد می‌کنیم تا Tailwind کلاس‌ها و استایل‌ها رو تولید یا مدیریت کنه.
مثال‌ها: @tailwind, @layer, @apply, @variants, @responsive.
🏗 Layer‌ها در Tailwind
Tailwind سه layer اصلی داره:
base → استایل‌های پایه (reset و typography)
components → استایل reusable کامپوننت‌ها مثل کارت‌ها و دکمه‌ها
utilities → کلاس‌های کمکی مثل text-center, m-4, bg-red-500
⚡ ترتیب اهمیت: base < components < utilities → وقتی کلاس تکراری باشه، لایه بالاتر override می‌کنه.
🔹 @layer components
برای ایجاد کامپوننت‌های custom:

@layer components {
  .btn-vitton { @apply px-4 py-2 rounded bg-sky-500 text-white hover:bg-sky-600; }
}

مزیت‌ها: کلاس‌ها مرتب تو لایه components می‌رن، حجم CSS کنترل‌شده با Purge/Content، و می‌تونی reuse کنی و maintenance راحت‌تر می‌شه.
🧩 Function‌‌ها و @apply
@apply کلاس‌های موجود Tailwind رو داخل کلاس custom ترکیب می‌کنه.
مثال:

.card { @apply p-5 rounded-lg shadow-lg bg-white; }

👀 نکات کاربردی
وقتی کامپوننت تو چند جای پروژه استفاده می‌شه، حتما داخل layer components تعریف کن.
لایه base برای reset و typography، utilities برای کلاس‌های کمکی سریع.
@layer باعث می‌شه ترتیب کامپایل و specificity درست بمونه و override تصادفی پیش نیاد.