🔹 فایل پیکربندی (tailwind.config.js)

وقتی پروژه جدید می‌سازی با دستور:

npx tailwindcss init

یک فایل tailwind.config.js ساخته میشه که تمام تنظیمات پروژه اونجاست.

🔹 ساختار اولیه فایل

module.exports = {
  content: ["./src/**/*.{html,js}"], // مسیر فایل‌هایی که کلاس‌ها داخلش استفاده میشه
  theme: {
    extend: {}, // اینجا می‌تونی استایل‌های سفارشی اضافه کنی
  },
  plugins: [],
}

📌 بخش‌های اصلی:

• content → مشخص می‌کنه Tailwind کجاها رو برای کلاس‌ها اسکن کنه.

• theme → تنظیمات مربوط به رنگ‌ها، سایز فونت، spacing و …

• plugins → اضافه کردن پلاگین‌ها یا قابلیت‌های جدید.

🔹 سفارشی‌سازی Theme

می‌تونی استایل‌های پیش‌فرض رو تغییر بدی یا گسترش بدی.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1E88E5",
      },
      spacing: {
        72: "18rem",
        84: "21rem",
        96: "24rem",
      },
    },
  },
}

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

<div class="bg-brand w-72">Box</div>

🔹 تغییر مقادیر پیش‌فرض

اگه بخوای کل یک مقدار پیش‌فرض رو عوض کنی، لازم نیست از extend استفاده کنی:

module.exports = {
  theme: {
    colors: {
      primary: "#FF5722",
      secondary: "#009688",
    },
  },
}

📌 اینجا دیگه فقط همین رنگ‌ها وجود دارن (نه رنگ‌های پیش‌فرض Tailwind).

🔹 بخش Variants

برای فعال کردن حالت‌های مختلف مثل hover, focus, responsive:

module.exports = {
  variants: {
    extend: {
      opacity: ["disabled"],
    },
  },
}

📌 حالا می‌تونی بنویسی:

<button class="opacity-50 disabled:opacity-25">Click Me</button>

🔹 اضافه کردن Plugins

می‌تونی پلاگین‌های آماده یا سفارشی به پروژه اضافه کنی:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

📌 پلاگین‌ها امکانات جدید مثل استایل‌دهی فرم‌ها یا متن‌های طولانی رو اضافه می‌کنن.

🔹 نکته مهم

• content رو درست تنظیم کن، وگرنه Tailwind کلاس‌ها رو حذف می‌کنه.

• از extend برای اضافه کردن استفاده کن (نه برای جایگزینی).

• theme() در CSS به مقادیر اینجا دسترسی داره.

• با Configuration می‌تونی Tailwind رو دقیقا مطابق نیاز پروژه‌ات شخصی‌سازی کنی.