🔹 Preflight چیه؟

Preflight در واقع یه CSS Reset پیشرفته هست که همراه Tailwind به صورت پیش‌فرض فعال میشه.
هدفش اینه که:

• استایل‌های پیش‌فرض مرورگرها (User Agent Styles) رو یکدست کنه

• پایه‌ی تمیزی برای طراحی با Utilityها بده

🔹 چی‌ها رو ریست می‌کنه؟

Preflight ترکیبی از Normalize.css + بهینه‌سازی‌های اختصاصی Tailwind هست.
کارهایی که انجام میده شامل:

• تنظیم box-sizing: border-box روی همه المنت‌ها

• حذف margin پیش‌فرض روی تگ‌هایی مثل h1, h2, p

• تنظیم اندازه فونت و line-height استاندارد

• یکسان‌سازی استایل دکمه‌ها و فرم‌ها بین مرورگرها

• یکدست کردن ظاهر تگ‌هایی مثل img, video, svg

🔹 نمونه تغییرات توسط Preflight

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

body {
  margin: 0;
  line-height: 1.5;
}

img,
video {
  max-width: 100%;
  height: auto;
}

📌 نتیجه: عناصر پایه بدون استایل اضافی مرورگر نمایش داده می‌شن.

🔹 غیرفعال کردن Preflight

بعضی وقتا نمی‌خوای Tailwind توی reset دخالت کنه (مثلاً پروژه‌ای با CSS موجود داری).
اون موقع می‌تونی Preflight رو خاموش کنی:

module.exports = {
  corePlugins: {
    preflight: false,
  },
}

🔹 نکته مهم

• Preflight همیشه به نفعته مگر اینکه CSS Reset اختصاصی خودت رو داشته باشی.

• بهترین کار اینه که بذاری فعال بمونه، چون Tailwind بر اساس اون Utilityهاشو طراحی کرده.

• با Preflight دیگه نیاز به Normalize.css جداگونه نداری.