🔹 چرا Editor Setup مهمه؟

وقتی با Tailwind کار می‌کنیم، تعداد زیادی کلاس Utility باید بنویسیم.
برای اینکه کدنویسی سریع‌تر و راحت‌تر باشه، بهتره ادیتور (مثل VS Code) رو تنظیم کنیم تا:

• پیشنهاد خودکار کلاس‌ها رو بده

• رنگ‌ها رو پیش‌نمایش کنه

• خطاهای احتمالی رو نشون بده

🔹 نصب پلاگین Tailwind CSS IntelliSense

برای VS Code افزونه‌ی Tailwind CSS IntelliSense بهترین گزینه است.
این افزونه امکانات زیر رو میده:

• Autocomplete → پیشنهاد خودکار کلاس‌ها

• Linting → پیدا کردن کلاس‌های اشتباه

• Hover Preview → دیدن توضیحات کلاس‌ها با هاور

• Color Preview → نمایش رنگ‌ها کنار کد

📌 نصب:

1. وارد VS Code بشو.

2. برو به بخش Extensions (Ctrl + Shift + X).

3. سرچ کن: Tailwind CSS IntelliSense و نصب کن.

🔹 تنظیمات VS Code برای Tailwind

📌 در فایل settings.json می‌تونی این موارد رو بذاری:

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.inlineSuggest.enabled": true,
  "tailwindCSS.emmetCompletions": true
}

✅ با این تنظیمات، پیشنهاد کلاس‌ها حتی داخل string هم فعال میشه.

🔹 استفاده از Prettier

برای مرتب کردن کد، افزونه‌ی Prettier رو نصب کن.
سپس در settings.json اضافه کن:

{
  "editor.formatOnSave": true
}

📌 هر بار فایل رو ذخیره کنی، کدها مرتب میشن.

🔹 نکته مهم

• Tailwind IntelliSense = ضروری برای راحتی کار

• Prettier = مرتب‌سازی خودکار

• اگه با React یا Vue کار می‌کنی، IntelliSense حتی داخل فایل‌های JSX/TSX یا Vue هم جواب میده.