🎨 تعریف متغیر رنگی در CSS

✔️ اول باید متغیرها رو داخل CSS تعریف کنیم
✔️ بهترین جا: @layer base

مثال:

@layer base {
  :root {
    --primary-color: 70 159 255;
    --secondary-color: 255 0 0;
  }
}

📌 نکات مهم:
• برای RGB کاما نمی‌ذاریم
• فقط عددها با فاصله نوشته میشن
• این متغیرها سراسری هستن

🎯 استفاده از متغیرها داخل tailwind.config.js

✔️ حالا متغیرها رو به Tailwind معرفی می‌کنیم

مثال:

colors: {
  "vitto-color": "#efefef",
  "vitto-palette": {
    100: "#4d4d4d",
    200: "#3c3c3c",
    300: "#1e1e1e",
    400: "#111111",
    500: "#000000",
  },
  "primary": "rgb(var(--primary-color))",
  "secondary": "rgba(var(--secondary-color))",
}

📌 معنی این کار:
• Tailwind رنگ رو از CSS Variable می‌خونه
• هر جا کلاس primary- رو بزنی، از اون متغیر استفاده میشه

🎯 استفاده از رنگ‌ها داخل HTML

✔️ بعد از تنظیم، خیلی ساده استفاده می‌کنی:

• bg-primary
• text-primary
• border-primary
• shadow-primary

📌 بدون نوشتن CSS اضافه

🎨 استفاده از Palette رنگی

✔️ مثال استفاده:
• bg-vitto-palette-100
• text-vitto-palette-300
• border-vitto-palette-500

📌 مزیت:
• کنترل شدت رنگ
• طراحی تمیز و حرفه‌ای

⚠️ نکته مهم کانفیگ Colors

• اگر کلیدی مقدار نداشته باشد:
👉 Tailwind کامپایل نمی‌شود ❌

• حتماً مقدار رنگ باید وجود داشته باشد

⚙️ تفاوت Override و Extend

✔️ colors (Override):
• رنگ‌های پیش‌فرض حذف می‌شوند

✔️ extend.colors:
• رنگ جدید اضافه می‌شود
• روش استاندارد

📦 تفاوت watch و build-css

✔️ CLI + watch:
• کلاس حذف‌شده از HTML
• داخل CSS باقی می‌ماند

✔️ build-css:
• CSS از نو ساخته می‌شود
• کلاس‌های استفاده‌نشده حذف می‌شوند
• حجم خروجی کمتر