لبه

حاشیه را در یک طرف یک عنصر با استفاده از m کنترل کنید- خدمات رفاهی.

به عنوان مثال ، MT-6 1. 5 ریمژ حاشیه را به بالای یک عنصر اضافه می کند ، MR-4 می تواند حاشیه ای از حاشیه را به سمت راست یک عنصر اضافه کند ، MB-8 می تواند حاشیه 2 را به پایین یک عنصر اضافه کند ، وML-2 می تواند 0. 5REM حاشیه را به سمت چپ یک عنصر اضافه کند.

قسمت طبقه="MT-6 . ">MT-6قسمت> قسمت طبقه="MR-4 . ">MR-4قسمت> قسمت طبقه="MB-8 . ">MB-8قسمت> قسمت طبقه="ML-2 . ">ML-2قسمت>

حاشیه افقی را اضافه کنید

حاشیه افقی یک عنصر را با استفاده از برنامه های MX- کنترل کنید.

قسمت طبقه="MX-8 . ">MX-8قسمت>

حاشیه عمودی را اضافه کنید

حاشیه عمودی یک عنصر را با استفاده از برنامه های کاربردی کنترل کنید.

قسمت طبقه="MY-8 . ">MY-8قسمت>

حاشیه را به همه طرف اضافه کنید

حاشیه را از همه طرف یک عنصر با استفاده از برنامه های کاربردی کنترل کنید.

قسمت طبقه="m-8 . ">m-8قسمت>

با استفاده از مقادیر منفی

برای استفاده از یک مقدار حاشیه منفی ، نام کلاس را با یک خط داش پیشوند کنید تا آن را به یک مقدار منفی تبدیل کنید.

قسمت طبقه="W-36 H-16 BG-SKY-400 Opacity-20.">قسمت> قسمت طبقه="-MT-8BG-SKY-300.">-MT-8قسمت>

با استفاده از خصوصیات منطقی

برای تنظیم خصوصیات منطقی-شروع و اتصال حاشیه و حاشیه خطی ، که نقشه را به سمت چپ یا راست بر اساس جهت متن ، از برنامه های MS-* و Me-* استفاده کنید.

قسمت خط="ltr"> قسمت طبقه="MS-8 . ">MS-8قسمت> قسمت طبقه="ME-8 . ">ME-8قسمت> قسمت> قسمت خط="RTL"> قسمت طبقه="MS-8 . ">MS-8قسمت> قسمت طبقه="ME-8 . ">ME-8قسمت> قسمت>

برای کنترل بیشتر ، همچنین می توانید از اصلاح کننده های LTR و RTL استفاده کنید تا بسته به جهت فعلی متن ، سبک های خاص را به صورت مشروط اعمال کنید.

اعمال مشروط شناور ، تمرکز و سایر کشورها

Tailwind به شما امکان می دهد با استفاده از اصلاح کننده های مختلف ، کلاس های ابزار را در حالت های مختلف اعمال کنید. به عنوان مثال ، از Hover: MT-8 استفاده کنید تا فقط ابزار MT-8 را در Hover اعمال کنید.

قسمت طبقه="MT-4شناور: MT-8"> قسمت> 

برای لیست کاملی از کلیه اصلاح کننده های حالت موجود ، مستندات Hover ، Focus و سایر ایالت ها را بررسی کنید.

نقاط شکست و نمایش داده شد

همچنین می توانید از اصلاح کننده های مختلف برای هدف قرار دادن پرس و جوهای رسانه ای مانند نقاط ضعف پاسخگو ، حالت تاریک ، ترجیح دادن حرکت به سمت کاهش و موارد دیگر استفاده کنید. به عنوان مثال ، از MD: MT-8 استفاده کنید تا ابزار MT-8 را فقط در اندازه های صفحه نمایش متوسط و بالاتر اعمال کنید.

قسمت طبقه="MT-4MD: MT-8"> قسمت> 

برای کسب اطلاعات بیشتر ، مستندات مربوط به طراحی پاسخگو ، حالت تاریک و سایر اصلاح کننده های پرس و جو رسانه ای را بررسی کنید.

با استفاده از مقادیر سفارشی سفارشی کردن موضوع خود

به طور پیش فرض ، مقیاس حاشیه Tailwind از مقیاس فاصله پیش فرض استفاده می کند. شما می توانید مقیاس فاصله خود را با ویرایش theme. spacing یا theme. extend. spacing در پرونده tailwind. config. js خود سفارشی کنید.

tailwind. config. js

مدول.صادر کردن =   موضوع:   توسعه دادن، گسترش:   فاصله:   '5px': '5px',  >  >  >  > 

از طرف دیگر ، شما می توانید با ویرایش موضوع. margin یا theme. extend. margin در پرونده tailwind. config. js فقط مقیاس حاشیه را سفارشی کنید.

tailwind. config. js

مدول.صادر کردن =   موضوع:   توسعه دادن، گسترش:   لبه:   '5px': '5px',  >  >  >  > 

در مورد شخصی سازی موضوع پیش فرض در مستندات سفارشی سازی موضوع بیشتر بدانید.

مقادیر دلخواه

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

قسمت طبقه="M- [5px]"> قسمت> 

در مورد پشتیبانی از ارزش دلخواه در مستندات ارزشهای دلخواه بیشتر بدانید.

کپی رایت © 2023 Tailwind Labs Inc. < Span> '5px'