در اینجا یک cheatsheet سریع برای کلاس های ابزار Tailwind CSS آمده است:
چیدمان
-
container: مرکز و حداکثر عرض را به محتوا اضافه می کند. -
mx-auto: یک عنصر را به صورت افقی مرکز می کند. -
my-auto: یک عنصر را به صورت عمودی مرکز می کند. -
flex: چیدمان flexbox را فعال می کند. -
grid: چیدمان شبکه CSS را فعال می کند. -
col-span-{number}: تعداد ستون های شبکه ای را که یک عنصر باید در آن قرار گیرد را مشخص می کند.
تایپوگرافی
-
text-{size}: اندازه فونت را تنظیم می کند (به عنوان مثال،text-sm،text-lg). -
text-{color}: رنگ متن را تنظیم می کند (به عنوان مثال،text-red-500،text-gray-800). -
font-{weight}: وزن فونت را تنظیم می کند (به عنوان مثال،font-semibold،font-bold). -
leading-{size}: ارتفاع خط را تنظیم می کند (به عنوان مثال،leading-normal،leading-tight). -
uppercase: متن را به حروف بزرگ تبدیل می کند. -
truncate: متن را با بیضی کوتاه می کند.
رنگ ها
-
bg-{color}: رنگ پس زمینه را تنظیم می کند (به عنوان مثال،bg-blue-200،bg-gray-700). -
text-{color}: رنگ متن را تنظیم می کند (به عنوان مثال،text-red-500،text-gray-800). -
border-{color}: رنگ حاشیه را تنظیم می کند (به عنوان مثال،border-green-400،border-gray-600).
فاصله گذاری
-
p-{size}: بالشتک را تنظیم می کند (به عنوان مثال،p-4،p-10). -
m-{size}: حاشیه را تنظیم می کند (به عنوان مثال،m-2،m-6). -
mt-{size}: حاشیه بالا را تنظیم می کند (به عنوان مثال،mt-3،mt-8). -
mb-{size}: حاشیه-پایین را تنظیم می کند (به عنوان مثال،mb-3،mb-8). -
ml-{size}: حاشیه سمت چپ را تنظیم می کند (به عنوان مثال،ml-3،ml-8). -
mr-{size}: حاشیه را به سمت راست تنظیم می کند (به عنوان مثال،mr-3،mr-8). -
mx-{size}: حاشیه افقی را تنظیم می کند (به عنوان مثال،mx-2،mx-6). -
my-{size}: حاشیه عمودی را تنظیم می کند (به عنوان مثال،my-2،my-6).
فلکس باکس
-
flex: ظرف انعطاف پذیر را فعال می کند. -
flex-{value}: مقدار انعطاف پذیری را تنظیم می کند (به عنوان مثال،flex-1،flex-auto). -
justify-{value}: تراز افقی را تنظیم می کند (به عنوان مثال،justify-start،justify-center). -
items-{value}: تراز عمودی را تنظیم می کند (به عنوان مثال،items-start،items-center). -
flex-wrap: به اقلام انعطاف پذیر اجازه می دهد تا بسته بندی شوند.
توری
-
grid-cols-{number}: تعداد ستون ها را در یک ظرف شبکه تنظیم می کند. -
col-span-{number}: تعداد ستون هایی را که یک عنصر باید در آن قرار گیرد را مشخص می کند. -
row-span-{number}: تعداد سطرهایی را که یک عنصر باید بپوشاند را مشخص می کند.
مرز ها
-
border: یک حاشیه به یک عنصر اضافه می کند. -
border-{width}: عرض حاشیه را تنظیم می کند (به عنوان مثال،border-2،border-4). -
border-{side}: حاشیه را در یک سمت خاص تنظیم می کند (به عنوان مثال،border-l،border-b). -
rounded: گوشه های گرد را اضافه می کند. -
rounded-{size}: اندازه شعاع حاشیه را تنظیم می کند (به عنوان مثال،rounded-full،rounded-lg).
قطعا! در اینجا چند کلاس کاربردی دیگر در Tailwind CSS آمده است:
نمایش دادن
-
hidden: یک عنصر را پنهان می کند. -
block: یک عنصر را به صورت بلوک نمایش می دهد. -
inline-block: یک عنصر را به صورت بلوک درون خطی نمایش می دهد. -
inline: یک عنصر را به عنوان عنصر درون خطی نمایش می دهد. -
flex: یک عنصر را به عنوان یک ظرف انعطاف پذیر نمایش می دهد. -
grid: یک عنصر را به عنوان ظرف شبکه نمایش می دهد. -
hidden-{breakpoint}: یک عنصر را در یک نقطه شکست خاص پنهان می کند (به عنوان مثال،hidden lg:block،hidden sm:inline).
سایز بندی
-
w-{size}: عرض یک عنصر را تنظیم می کند (به عنوان مثال،w-full،w-1/2). -
h-{size}: ارتفاع یک عنصر را تنظیم می کند (به عنوان مثال،h-64،h-px). -
min-w-{size}: حداقل عرض یک عنصر را تنظیم می کند. -
min-h-{size}: حداقل ارتفاع یک عنصر را تنظیم می کند. -
max-w-{size}: حداکثر عرض یک عنصر را تنظیم می کند. -
max-h-{size}: حداکثر ارتفاع یک عنصر را تنظیم می کند.
تثبیت موقعیت
-
static: خاصیت position را روی static قرار می دهد. -
fixed: ویژگی موقعیت را روی ثابت قرار می دهد. -
absolute: خاصیت position را روی absolute قرار می دهد. -
relative: ویژگی position را روی relative قرار می دهد. -
sticky: ویژگی position را روی sticky قرار می دهد. -
top-{size}: موقعیت بالای یک عنصر را تنظیم می کند. -
bottom-{size}: موقعیت پایین یک عنصر را تنظیم می کند. -
left-{size}: موقعیت سمت چپ یک عنصر را تنظیم می کند. -
right-{size}: موقعیت صحیح یک عنصر را تنظیم می کند.
سایه ها
-
shadow-sm: یک سایه کوچک اضافه می کند. -
shadow: یک سایه متوسط اضافه می کند. -
shadow-lg: یک سایه بزرگ اضافه می کند. -
shadow-xl: یک سایه بسیار بزرگ اضافه می کند. -
shadow-none: سایه را از بین می برد.
تعامل
-
cursor-{value}: سبک مکان نما را تنظیم می کند (به عنوان مثال،cursor-pointer،cursor-not-allowed). -
pointer-events-{value}: رفتار رویدادهای اشاره گر را تنظیم می کند (به عنوان مثال،pointer-events-none،pointer-events-auto). -
select-none: انتخاب متن عنصر را غیرفعال می کند.
متفرقه
-
overflow-{value}: رفتار سرریز را تنظیم می کند (به عنوان مثال،overflow-hidden،overflow-y-auto). -
opacity-{value}: کدورت یک عنصر را تنظیم می کند (به عنوان مثال،opacity-50،opacity-75). -
z-{value}: شاخص z یک عنصر را تنظیم می کند (به عنوان مثال،z-10،z-50). -
transition-{property}: افکت های انتقال را به یک ویژگی اضافه می کند (به عنوان مثال،transition-opacity،transition-transform).
به یاد داشته باشید، اینها تنها چند نمونه هستند، و Tailwind CSS کلاس های کاربردی بیشتری را ارائه می دهد تا به شما کمک کند تا به برنامه های وب خود سبک کارآمدی بدهید.
درباره نویسنده. جفری کالاگان یک برنامه نویس در fabform.io است که روی تیم خدمات پشتیبانی فرم کار می کند.
