🔹 چرا بهینه‌سازی مهمه؟

وقتی با Tailwind کار می‌کنی، فایل CSS می‌تونه خیلی بزرگ بشه چون همه‌ی کلاس‌ها داخلشه.
برای اینکه سایتت سریع‌تر لود بشه، باید در نسخه‌ی نهایی (Production) فقط کلاس‌هایی که واقعا استفاده کردی توی خروجی بمونن.

🔹 فعال‌سازی Purge (Content Option)

در فایل tailwind.config.js مسیر فایل‌های پروژه رو مشخص کن:

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

📌 اینطوری Tailwind فقط کلاس‌هایی که توی فایل‌های پروژه استفاده شدن رو نگه می‌داره.

🔹 ساخت نسخه Production با CLI

npx tailwindcss -o build.css --minify

✅ فایل CSS خروجی خیلی کوچیک‌تر میشه.

🔹 استفاده در پروژه React/Vue/Next.js

در فریم‌ورک‌هایی مثل React یا Next.js فقط کافیه مسیر فایل‌ها رو درست در قسمت content تنظیم کنی.
مثال (برای Next.js):

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

🔹 ابزارهای کمکی

• PostCSS + Autoprefixer → اضافه کردن پیشوند مرورگرها

• CSS Minify → فشرده‌سازی کد

• Cache Control → کمک به سرعت بارگذاری در مرورگر

🔹 نکته مهم

• همیشه قبل از انتشار نهایی (deploy) → دستور build رو اجرا کن.

• در حالت Development → فایل CSS کامل می‌مونه (برای راحتی کار).

• در حالت Production → فقط کلاس‌های استفاده شده نگه داشته میشن.