استایل های پیش از پرواز و پایه تیلویند

پری‌فلایت Preflight جایی است که شما سبک های پایه خود را در Tailwind تنظیم می کنید. این بر روی مدرن-نرمالیز (ادرس گیت هاب: https://github.com/sindresorhus/modern-normalize) ساخته شده است که به نسبت قوی - aggressive است. اما، شما می توانید آن را تا آنجا که می خواهید سفارشی کنید.

وقتی می‌گوییم استایل‌های پایه‌ی تیلویند: قوی یا "aggressive" هستند، به این معناست که این استایل‌ها می‌توانند تغییرات قابل توجهی در طراحی پیش‌فرض عناصر HTML ایجاد کنند. به عبارت دیگر، این استایل‌ها ممکن است ظاهر عناصر را به شکلی تغییر دهند که ممکن است نیاز به تنظیمات و سفارشی‌سازی اضافی داشته باشید تا با طراحی مورد نظر شما مطابقت پیدا کند.

@tailwind base; /* اینجا استایل‌های مقدماتی بارگذاری می‌شوند. */
@tailwind components;
@tailwind utilities;

همان‌طور که می‌بینید، استایل‌های پایه‌ی Tailwind نسبتا قوی - aggressive هستند. به این کد توجه کنید:

<div>
	<button>من یک دکمه هستم</button>
	<input placeholder=&quotInput placeholder.&quot />
</div>

مشاهده نمایش کدهای بالا در سه برگ:

گسترش استایل‌های پایه Tailwind

گسترش، تغییر یا اصلاح استایل‌های پایه‌ی Tailwind کاملاً ساده است. شما می‌توانید لایه‌ی CSS را دوباره باز کنید و هر استایلی که می‌خواهید اضافه کنید.

@tailwind base;

@layer base {
	pre {
		background-color: #f0f0f0;
	}
}

@tailwind components;
@tailwind utilities;

غیرفعال کردن استایل‌های پایه Tailwind

پری‌فلایت Preflight به طور فنی یک پلاگین اصلی است. اگر می‌خواهید Preflight را کاملاً غیرفعال کنید، می‌توانید این کار را در پیکربندی آن انجام دهید.

export default {
	corePlugins: {
		preflight: false
	}
};

استایل‌های پایه Tailwind شامل چه چیزهایی می‌شود؟

تنظیمات جهانی Global Settings

• اندازه جعبه: ویژگی box-sizing را برای تمام عناصر و شبه‌عناصر before/after آنها به border-box تنظیم می‌کند. این کار مدیریت چیدمان‌ها را ساده‌تر می‌کند زیرا padding و border در عرض و ارتفاع کل عنصر گنجانده می‌شود.
• بازنشانی مرز یا بوردر border reset: عرض مرز، سبک مرز و رنگ مرز: border-width, border-style, and border-color را برای تمام عناصر یا المانها بازنشانی می‌کند تا استایل یکنواختی را تضمین کند.

استایلهای HTML و Body

- استایل HTML: استایل‌های جهانی مختلفی را در سطح HTML تنظیم می‌کند، از جمله ارتفاع خط، تنظیم اندازه فونت، اندازه تب و خانواده فونت.

- استایل Body: حاشیه body را به 0 بازنشانی کرده و ارتفاع خط را از عنصر HTML به ارث می‌برد.

تایپوگرافی

- بازنشانی عنوان‌ها: اندازه و وزن فونت برای عنوان‌ها (h1 تا h6) را بازنشانی می‌کند.

- بازنشانی لینک‌ها: لینک‌ها را به رنگ والدینشان به ارث می‌برد و تزئین متن پیش‌فرض را حذف می‌کند.

- قوی و بولد: اطمینان حاصل می‌کند که عناصر b و strong به صورت بولدتر نمایش داده شوند.

- استایل کد: برای بلوک‌های کد و عناصر مرتبط فونت مونو اسپیس تنظیم می‌کند.

- متن کوچک: اندازه فونت کمتری برای عنصر small تنظیم می‌کند.

عناصر فرم

- استایل کنترل فرم: ظاهر را استاندارد می‌کند و padding و margin‌های خاص مرورگر را برای عناصر فرم مانند دکمه، ورودی، انتخاب و غیره حذف می‌کند.

عناصر متفرقه Misc Elements

- قانون افقی (hr) Horizontal Rule : استایل‌های خاصی برای عناصر <hr> تنظیم می‌کند.

- اختصارات Abbreviations: استایل‌ها برای تگ‌های اختصارات با اتریبیوت title.

- زیرنویس و بالانویس Subscript and Superscript: استایل‌ها برای تگ‌های sub و sup به‌طوری‌که بر ارتفاع خط تأثیر نگذارند.

استایل‌های جدول

- پیش‌فرض‌های جدول: استایل جدول را استاندارد می‌کند تا شکاف‌های بین مرزها را حذف کرده و وراثت رنگ مرز را اصلاح کند.

استایل‌های فوکوس

- حلقه فوکوس برای Firefox: استایل فوکوس را در Firefox تنظیم می‌کند تا از outline خودکار استفاده کند.

- رابط کاربری UI نامعتبر برای فایرفاکس: box-shadow را برای عناصر نامعتبر در Firefox حذف می‌کند.

عناصر جایگزین

- عناصر جایگزین (img، svg و غیره): این عناصر را به display: block تنظیم کرده و آنها را به صورت عمودی در وسط قرار می‌دهد. همچنین اطمینان می‌دهد که به درستی مقیاس‌بندی شده و نسبت ابعاد را حفظ کنند.

استایل‌های placeholder

- متن placeholder: اپاسیتی و رنگ خاصی برای متن placeholder در عناصر ورودی و textarea تنظیم می‌کند.

تنظیمات نشانگر Cursor

- نشانگر برای دکمه‌ها: اطمینان حاصل می‌کند که دکمه‌ها و دکمه‌های مبتنی بر نقش دارای نشانگر pointer باشند.

اتریبیوت هیدن Hidden Attribute

- عناصر Hidden: عناصر با ویژگی [hidden] را به display: none تنظیم می‌کند.