آموزش استفاده از Letter spacing در Tailwind-css

در این مقاله از گروه برنامه نویسی وارنا ، به آموزش استفاده از کلاس های Letter spacing در تیلویند میپردازیم.

تا حالا شده که بخواهید بین کلمات یا اعداد یک عبارت ، فاصله ی بیشتری داشته باشید. در CSS برای انجام چنین کاری از Letter spacing استفاده میکردیم که چنین قابلیتی در Tailwind-css با نام Tracking موجود میباشد.

کلاس های پیش فرض Tracking در Tailwind-css

ابتدا نگاهی بندازیم به کلاس های پیش فرض Tracking در خود Tailwind-css که معادل آن در CSS در جلوی آن نوشته شده است:

بخوانید درباره :استفاده از کلاس های Position در Tailwind-css

استفاده از tracking در hover ، Focus و ....

شما میتوانید تعیین کنید که به صورت شرطی کلاس tracking روی المان مورد نظر شما اعمال شود. برای مثال با قطعه کد زیر ، در صورتی که نشانگر موس روی المان مورد نظر قرار گیر ، قاصله ی بین حروف یا اعداد بیشتر خواهد شد

شما میتوانید با استفاده از کلاس Tracking به شکل tracking-{size} از آن بهره ببرید. برای مثال:

دوره ی آموزش Tailwind وارنا

ما در گروه برنامه نویسی وارنا ، دوره ی آموزشی مخصوص تیلویند آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند رو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.

شخصی سازی اندازه های Letter Spacing

شما میتوانید سایز های مورد نطر خودتون رو در Tailwind config با اسم های مورد نظر خودتون تعریف کنید و از آن ها بهره ببرید:

مقدار دهی مستقیم به tracking

همچنین شما میتوانید به شکل زیر به صورت مستقیم، اندازه ی مورد نظر خودتون رو برای Letter Spacing اعمال کنید:

آموزش و استخدام در وارنا

آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قبولی ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !