🔥بریم سراغ قسمت بعدی از مباحث TailwindCss
همونطوری که میدونین ما توی اموزش قبلی درباره کار با متن ها صحبت کردیم و خب خیلی طولانی بود این مبحث و نصفش به این سمت افتاد که الان قراره توی این پست باهم پیش ببریمش

اول از همه راجب شکستگی متن ها میخایم صحبت کنیم یا همون text-wrap که اصولا خیلی اسون میتونه باشه براتون و یه همچین لیست کوتاهی از کلاس هارو سمت تیلویند برای استفاده ازش داریم:

text-wrap
text-nowrap
text-balance
text-pretty

✅و خب از اسمشون خیلی قشنگ مشخصه چیکار میکنن البته اینم بگم اسماش طوریه که صرفا خلاصه شده و میدونین که اینا همشون پراپرتی های css هستن

موضوع بعدی مربوط به مبحث فاصله underline از متنه یا همون unerline-offset
اول از همه برای ساخت یه خط زیر متن یا همون underline از همین کلاس underline استفاده میکنیم، و بعدش هم میتونیم فاصلش رو با offset تنظیم کنیم:

class="underline underline-offset-1"

اینم از 0 تا 8 داره و بر واحد پیکسله

💥خب حالا برای ترنسفورم متن ها که آپرکیس و... باشن هم کلاسای خیلی ساده‌ای داریم، از جمله:

uppercase 
lowercase
capitalize
normal-case // none

و خب قطعا باهاشون اشنایی دارین

قابلیت بعدی که تیلویند به ما میده برای مدیریت بیرون زدن متن هاس، یا همون text-overflow که بتونیم سه نقطه (...) اخر متن هامون که زیادی هستن و میزنن بیرون اضافه کنیم، ما سه تا کلاس قشنگ داریم:

truncate
text-ellipsis
text-clip

☄️دوتای پایین که مشخصه کارشون نسبت به پراپرتی css اونا قابل فهمه، ولی خب کلاس اولی جدیده و شامل سه تا استایل میشه سمت css ، یعنی شما وقتی از کلاس truncate استفاده کنین این کلاس ها به المنت شما داده میشه:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

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

indent-0.5
indent-1
...
indent-96

با این کلاس و اندازه ها شما هرطوری خاستین فاصله بدین

✨برای کاستوم کردن text-align هم راحت میتونین اول text بزنین بعدش هم جهت دلخواه، مثلا:

text-center
text-start
text-end

👑خب بچه ها سعی کردم توی این پست و پست قبلی درباره کار با متن ها اون نکات مهم و کاربردی رو بگم هرچند بازم کلاس های زیادی وجود داره

#tailwind #tailwind_7
☕️ @CodeExplore