🔹 Content توی Tailwind چیه؟

Tailwind برای اینکه حجم فایل CSS نهایی خیلی بزرگ نشه، فقط کلاس‌هایی رو نگه می‌داره که واقعا توی پروژه استفاده شدن.
اینجا Content تعیین می‌کنه کجاها دنبال کلاس‌ها بگرده.

🔹 ساختار ساده

در فایل tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

📌 معنی این مثال:

• داخل پوشه src/

• همه فایل‌های .html و .js

• همه زیرپوشه‌ها (**/*)

🔹 چند مسیر مختلف

می‌تونی چند مسیر مشخص کنی:

module.exports = {
  content: [
    "./public/**/*.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
}

📌 اینجا همه فایل‌های HTML، JS، TS، React و Next.js اسکن میشن.

🔹 استفاده در فریم‌ورک‌ها

• Next.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
}

• Vue.js:

module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
}

• Laravel:

module.exports = {
  content: ["./resources/**/*.blade.php", "./resources/**/*.js"],
}

🔹 Safelisting (جلوگیری از حذف کلاس‌ها)

اگه کلاسی به صورت داینامیک تولید میشه (مثلا text-red-500 از دیتابیس بیاد)، باید safelist کنی:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    "text-red-500",
    "bg-green-500",
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/, // با Regex
    },
  ],
}

📌 اینطوری مطمئن میشی کلاس‌ها حتی اگه مستقیم توی کد نیومدن، حذف نمیشن.

🔹 نکته مهم

• Content دقیقا مشخص می‌کنه چه کلاس‌هایی توی build بمونن.

• همیشه مسیرها رو درست بذار، وگرنه کلاس‌ها کار نمی‌کنن.

• برای کلاس‌های داینامیک → از safelist استفاده کن.