🔹 چرا به استایل‌های سفارشی نیاز داریم؟

Tailwind تقریبا همه چیز رو با Utility Classes پوشش می‌ده.
ولی بعضی وقت‌ها لازمه رنگ، فونت یا استایلی مخصوص پروژه خودت تعریف کنی.
اینجاست که Custom Styles وارد میشه.

🔹 روش ۱ – استفاده از @apply

برای ترکیب چند کلاس تکراری، می‌تونی از @apply توی فایل CSS استفاده کنی:

/* styles.css */
.btn-custom {
  @apply bg-purple-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-purple-800;
}

📌 استفاده در HTML:

<button class="btn-custom">Click Me</button>

🔹 روش ۲ – تغییر tailwind.config.js

می‌تونی رنگ‌ها، فونت‌ها یا سایزهای دلخواهت رو به Tailwind اضافه کنی.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#FF5722",
      },
      fontFamily: {
        custom: ["Vazirmatn", "sans-serif"],
      },
    },
  },
}

📌 حالا می‌تونی استفاده کنی:

<p class="text-brand font-custom text-lg">سلام! این متن سفارشی است.</p>

🔹 روش ۳ – نوشتن CSS معمولی

گاهی نیازی به @apply یا Config نیست، فقط یه استایل خاص می‌خوای.
می‌تونی کنار Tailwind از CSS معمولی هم استفاده کنی:

/* styles.css */
.shadow-glow {
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.5);
}

📌 در HTML:

<div class="bg-white p-6 rounded shadow-glow">
  کارت با افکت سفارشی
</div>

🔹 روش ۴ – ساخت Plugin سفارشی

برای پروژه‌های بزرگ می‌تونی پلاگین‌های خودت رو بنویسی.

// tailwind.config.js
plugins: [
  function({ addUtilities }) {
    const newUtilities = {
      ".rotate-y-180": {
        transform: "rotateY(180deg)",
      },
    }
    addUtilities(newUtilities)
  }
]

📌 استفاده:

<div class="rotate-y-180">چرخش سفارشی</div>

🔹 نکته مهم

• برای استایل‌های کوچک و تکراری → @apply

• برای رنگ‌ها و فونت‌های پروژه → extend در config

• برای افکت‌ها و قابلیت‌های جدید → CSS سفارشی یا Plugin

• Tailwind انعطاف‌پذیره و می‌تونی هر جور که خواستی توسعه بدی.