🔹 Directives در Tailwind

Tailwind یک سری دستور (Directive) داره که توی فایل CSS استفاده می‌شن.
این دستورات به Tailwind می‌گن کجا چه Utilityهایی رو وارد کنه.

🔸 دستورات اصلی

@tailwind base;      /* ریست و استایل‌های پایه */
@tailwind components; /* کامپوننت‌های آماده (مثلاً فرم‌ها) */
@tailwind utilities;  /* کلاس‌های Utility مثل bg-red-500 */

📌 معمولا فایل input.css اینطوریه:

@tailwind base;
@tailwind components;
@tailwind utilities;

🔹 Directives پیشرفته

🔸 @apply

برای بازاستفاده از کلاس‌ها:

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700;
}

🔸 @layer

برای اضافه کردن استایل‌های سفارشی به لایه‌های Tailwind:

@layer components {
  .card {
    @apply bg-white shadow p-6 rounded-lg;
  }
}

📌 اینطوری استایل‌ها داخل سیستم لایه‌ای Tailwind قرار می‌گیرن و ترتیبشون درست حفظ میشه.

🔸 @variants (قدیمی‌تر، در نسخه‌های جدید داخل @layer استفاده میشه)

مثلا برای اضافه کردن hover یا responsive:

@variants hover {
  .btn-outline {
    @apply border border-blue-500 text-blue-500;
  }
}

🔹 Functions در Tailwind

علاوه بر Directives، Tailwind چند Function کاربردی برای config داره.

🔸 theme()

دسترسی به مقادیر موجود در tailwind.config.js:

.custom-title {
  font-size: theme('fontSize.2xl');
  color: theme('colors.red.500');
}

🔸 screen()

برای breakpointها در media query:

@media screen(theme('screens.md')) {
  .sidebar {
    display: none;
  }
}

🔹 نکته مهم

• @tailwind برای وارد کردن بخش‌های اصلیه.

• @apply برای بازاستفاده از کلاس‌ها.

• @layer برای قرار دادن استایل‌های سفارشی داخل سیستم Tailwind.

• theme() و screen() برای استفاده از config داخل CSS.