⚡️جیگرا بیاین بریم سراغ ادامه مباحث TailwindCss، میخایم وارد کار با فونت و متن ها بشیم شاید طول بکشه و اگه نیاز شد 2 پارتش کنیم

👑خب اول از همه اینکه فونت ها داخل تیلویند خیلی ساده هستن و به صورت دیفالت هم یسری فونت داخل خودش هست، میتونین هم داخل کانفیگ ها هر فونتی خاستین اضافه کنین( رنگ و سایز و.. هم میشه ولی هنوز دربارش صحبتی نکردیم )
خب شما اگه بخاین یه فونت به یه المنت اختصاص بدین روشش اینه:

font-fontName

مثلا

font-serif

بحث بعدی راجب وزن فونت هاس، یعنی همون font-weight که اونم خیلی راحت میتونین استفاده کنین:

font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

به ترتیب از font weight های 100 تا 900 میره بالا

☄️خب برسیم سراغ اندازه فونت ها یا همون Font Size که اینسری با کلمه font شروع نمیشه به جاش از text استفاده میکنیم
برای اندازه فونت ها میتونین این کلاس هارو به المنتتون اضافه کنین:

text-xs => 12px
text-sm => 14px
text-base => 16px
text-lg => 18px
text-xl => 20px
text-2xl => 24px
...
text-9xl => 128px

البته در نظر داشته باشین این موارد یه line-height هم بهتون میدن نسبت به اندازشون

اما خب ما بخایم رنگ متن هارو عوض کنیم چی؟ خیلی راحت بعد از text بیاین و رنگ مورد نظرتون رو قرار بدین:

text-red-500
text-black
text-white

حالا برای کاستوم کردن text decoration چه کلاسایی داریم؟ خدمت شما:🌟

underline
overline
line-through
no-underline

دیگه اون اضافه هاش توسط تیلویند حذف شده و همین اصل کارش مونده
نکته خفن اینه که میتونین این decoration رو کاستوم کنین، رنگ و استایل بهش بدین مثلا!

decoration-green-800
decoration-solid
decoration-double
decoration-doted
decoration-dashed
decoration-wavy

حتی اصن ضخامتش هم تغییر بدین اصن همچی در اختیارتونه:🦦

decoration-0
decoration-1
decoration-2
decoration-4
decoration-8

اینا هرکدوم بر اساس پیکسله دیگه مثلا 4 میشه 4 پیکسل
برای استایل فونت هاتون هم میتونین از موارد زیر استفاده کنین:

italic 
not-italic

اسمشون معلومه دیگه میان این استایل ایتالیک بودن رو میدن یا نمیدن

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

#tailwind #tailwind_6
☕️ @CodeExplore