🔹 پیش‌پردازنده (Preprocessor) چیه؟

پیش‌پردازنده‌هایی مثل Sass, Less یا Stylus به ما اجازه میدن کدهای CSS پیشرفته‌تر بنویسیم (مثل متغیر، توابع و nesting).
بعد از کامپایل، این کدها تبدیل به CSS معمولی میشن.

🔹 استفاده از Tailwind در Sass (SCSS)

1. نصب Sass (اگه نداری):

npm install sass --save-dev

2. فایل input.scss بساز و دستورات Tailwind رو وارد کن:

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

/* کدهای Sass دلخواه */
$brand: #4CAF50;

.btn {
  background: $brand;
  @apply text-white font-bold py-2 px-4 rounded;
}

3. خروجی CSS بگیر:

sass input.scss output.css

📌 اینطوری می‌تونی همزمان از قابلیت‌های Sass و کلاس‌های Tailwind استفاده کنی.

🔹 استفاده از Nesting در Sass + Tailwind

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

  h2 {
    @apply text-xl font-bold;
  }

  p {
    @apply text-gray-600;
  }
}

✅ استایل‌ها رو مرتب‌تر و خواناتر می‌کنه.

🔹 با Less یا Stylus هم مشابه همینه

کافیه دستورات @tailwind رو در فایل .less یا .styl بذاری و بعد خروجی بگیری.

🔹 نکته مهم

• Tailwind فقط نیاز داره در نهایت CSS خروجی داشته باشی.

• برای پروژه‌های بزرگ، ترکیب Tailwind + Sass خیلی کاربردیه.

• ویژگی Nesting در Sass خیلی به خوانایی کمک می‌کنه.