Tailwind یه پالت رنگی کامل از قبل داره (مثل red-500, blue-600, gray-300 و …).
اما می‌تونی رنگ‌های خودت رو اضافه یا حتی کل پالت رو تغییر بدی.

🔹 اضافه کردن رنگ سفارشی

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1E88E5",
        accent: {
          light: "#FFB74D",
          DEFAULT: "#FF9800",
          dark: "#F57C00",
        },
      },
    },
  },
}

📌 استفاده:

<div class="bg-brand text-white">برند من</div>
<p class="text-accent">رنگ اصلی</p>
<p class="text-accent-dark">رنگ تیره</p>

🔹 جایگزینی کامل رنگ‌های پیش‌فرض

اگه بخوای فقط رنگ‌های خودت باشن:

module.exports = {
  theme: {
    colors: {
      primary: "#FF5722",
      secondary: "#4CAF50",
      black: "#000",
      white: "#fff",
    },
  },
}

📌 حالا فقط همین رنگ‌ها کار می‌کنن (bg-primary, text-secondary و …).

🔹 استفاده از متغیرهای CSS

برای انعطاف بیشتر می‌تونی رنگ‌ها رو با CSS Variables تعریف کنی:

module.exports = {
  theme: {
    extend: {
      colors: {
        skin: {
          base: "var(--color-base)",
          accent: "var(--color-accent)",
        },
      },
    },
  },
}

📌 استفاده:

<div class="bg-skin-base text-skin-accent">Custom Theme</div>

و توی CSS تعریف می‌کنی:

:root {
  --color-base: #111827;
  --color-accent: #F59E0B;
}

🔹 استفاده در Dark Mode

رنگ‌ها رو می‌تونی با حالت Dark Mode ترکیب کنی:

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  متن در دارک مود تغییر می‌کنه
</div>

🔹 نکته مهم

• برای اضافه کردن → از extend استفاده کن.

• برای تغییر کامل → مستقیم داخل theme.colors بنویس.

• می‌تونی رنگ‌ها رو به صورت ساده، شیء چندسطحی یا حتی متغیر CSS تعریف کنی.

• Tailwind رنگ‌ها رو بر اساس اسم می‌سازه (bg-*, text-*, border-*).