تیلویند یکی از محبوب ترین فریم ورک های CSS است که در ابتدای معرفی مورد استقبال توسعه دهندگان بسیاری قرار گرفت و به یکی از ابزارهای کاربردی بین توسعه دهندگان فرانت اند تبدیل شد.
منبع تصویر : lambdatest.com
البته قبل از tailwind هم کتابخونه های دیگه ای هم مثل Bootstarp و Bluma یا Foundation هم وجود داشتن اما تیلوند تونست خیلی سریع از این ابزارها پیشی بگیره و جای خود را در دل توسعه دهندگان باز کنه
البته بنظرم هنوز هم بوت استرپ رو بعنوان رقیب جلوی خودش میبینه و هنوز هم انتخاب خیلی از توسعه دهندگان هست (بخصوص ایران)
البته چیزی که در هنگام مقایسه bootstarp و tailwind باید در نظر بگیریم اینه که بوت استرپ دیزاین های از پیش تعریف شده داره که شما میتونی با افزودن چند کلاس اونارو بسازی اما تیلوند شما همه عناصر رو باید خودتون بسازین و از دیزاین سیستم خاصی پیروی نمیکنه یا به عبارتی دیگه توی بوت استرپ دیزاین ها و پترن ها از قبل تعریف شده اما توی تیلوند شما روی تمام عناصر و المان ها می تونین سبک خودتون رو پیاده کنین و انعطاف پذیری بیشتری در هنگام طراحی بهتون میده
اما با این انعطاف پذیری تیلوند احتمالا نیاز باشه تمام عناصر و المان هارو خودتون بسازین و خب ممکنه توی پروژه های بزرگ با کامپوننت و المان های خیلی زیاد گاها به مشکل بخورین (بخصوص از لحاظ زمان) پس خیلی خوب میشه اگر بتونیم در کنار تیلوند از کتابخونه ها و کیت های که برای تیلوند معرفی شدن و یا از اون قدرت گرفتن هم استفاده کنیم
تفاوت Component Library و UI Kit
در Component Library ها دیزاین سیستم از پیش طراحی شده و المان ها ساختار مشخص خودشون رو دارن و شما توی اون چارچوب صفحات خودتون رو با همون دیزاین از پیش تعریف شده میسازین و توسعه میدین
اما در استفاده از UI Kit ها یک سری کامپوننت یا المان خاص شخصی سازی شده که شما میتونین المان های اونارو بعنوان نمونه توی پروژه خودتون که از پیش ساختار و دیزاین سیستم خودشون رو داره قرار بدین و نمیخواین از یک دیزاین سیستم از پیش تعریف شده استفاده کنین بلکه فقط نیاز به یک سری المان آماده دارین که بتونین شخصی سازی کنین مثلا (Card, Button, …)
کتابخانه هایی که می توانید در کنار تیلویند استفاده کنید
daisyui
کتابخونه جذاب که خیلی از کامپوننت و المان هایی که میسازین و مجبورین کلاس های خیلی زیادی براشون بنویسین که ممکنه یکم کد رو شلوغ کنه رو با استفاده از کلاس های از پیش تعریف شده براتون ساده تر میکنه
منم تو خیلی از پروژه ها استفادش کردم
headlessui
یه کتابخونه خیلی کوچیک و با انیمیشن های مینیمال و ساده که اگر با shadcn کار کرده باشین ساختار کامپوننت های headless هم دقیقا مثل همونه و نیاز به نوشتن کلاس های کمتری دارین و باید صرفا اون کامپوننت ها فراخوانی بشن
flowbite
بیش از ۶۰۰ المان مختلف داره که مهم هم نیست دارین از چه فریم ورکی برای فرانت پروژه استفاده میکنین البته نسخه پرمیوم هم داره اما رایگانش بنظرم کار رو بازم برامون در میاره
material-tailwind
یه کتابخونه کامل دیگه که طراحی مینیمال و جذابی داره اما فقط در ورژن فعلی داره ری اکت رو ساپورت میکنه و به گفته خودش در آینده قراره برای vue, angular هم توسعه داده بشه
merakiui
یکی دیگه از کتابخونه های خوب و قابل توسعه که از راستچین یا همون RTL هم پشتیبانی میکنه و میتونین دارک مود رو هم به پروژه تون اضافه کنین
hyperui
از این کیت ها استفاده کردم برای المان های که میخوایم یه بخش هایی رو کامل کنیم و نیاز نیست خیلی کارآمده و توی دو حالت راستچین و چپ چین هم کد بهمون میده اما خب خیلی کامل نیست جوری که بشه تمام المان هایی که ممکنه تو یه پروژه بزرگ نیاز باشه رو داشته باشه و خب اصولا با همون کدهای طولانی خود تیلویند ساخته شدن
tailwindui
محدوده و اکثر کامپوننت هاش پولیه ولی در حد چند نمونه ساده میتونین از کدهاش استفاده کنین هرچند بنظر من نمیتونه تو پروژه های متوسط به بالا بهتون کمکی بکنه و میشه از کتابخونه های بهتری استفاده کرد اما همچنان خب ازش استفاده میشه بعنوان یک کتابخونه محبوب تیلویند
preline
کار باهاش ساده اس و خب باید برای استفاده از بعضی قابلیت هاش همیشه یه سری پکیج دیگه هم استفاده کنین که موقع استفاده از المان های آماده اش توی داکیومنت همیشه ازتون میخواد که برای جلوگیری از بروز باگ یا درست کار نکردن باید پکیج دیگه ای رو هم کنارش نصب کنین
tw-elements
اگه هنوزم طرفدار بوت استرپی و یا ساختار و دیزاین پروژه با بوت استرپ بوده و میخوای با حفظ همون ساختار پروژه رو با تیلویند ری فکتور کنی این کتابخونه کامل که بیش از ۵۰۰ المان داره به کار میاد و خیلی المان و کامپونتت های کاملی داره و خب حس این رو بهتون میده انگار دارین از MUI استفاده میکنین. به نظر من که خیلی شبیه به MUI توسعه داده شده
دیدگاهتان را بنویسید