معرفی
چرا ممکن است بخواهید به جای چیزی مانند MUI، Chakra UI و Mantine از یک کتابخانه مؤلفه مبتنی بر tailwind استفاده کنید؟ اگر از tailwind استفاده می کنید، بهتر است از یک کتابخانه مؤلفه مبتنی بر tailwind استفاده کنید که در آن مؤلفه ها را مستقیماً با tailwind سفارشی می کنید.
Daisy کلاس های خاصی مانند “btn”، “card” و غیره را به شما می دهد. این کلاس های ویژه ترکیبی از کلاس های دیگر tailwind utility هستند. این کلاس ها دارای ویژگی پایینی هستند، بنابراین می توانید به راحتی آنها را به این صورت لغو کنید:
<button class="btn bg-blue-500">Default</button>
ممکن است برخی افراد موافق نباشند که من رتبه دیزی را خیلی پایین آورده ام، اما به نظر من دیزی مشکلاتی دارد:
- حرفه ای به نظر نمی رسد، رنگ ها بسیار پر زرق و برق هستند، آیا می توانید آن را سفارشی کنید تا حرفه ای تر باشد؟ مطمئن. اما ظاهر حرفه ای نیست.
- نحوه ایجاد مؤلفه ها را به صورت خلاصه می کند. اساساً، وقتی از کلاس‌های ویژه‌ای مانند «btn» استفاده می‌کنید، نمی‌دانید که از کدام کلاس‌های کاربردی tailwind تشکیل شده‌اند. این برای یادگیری و سفارشی‌سازی ایده‌آل نیست، بنابراین من کتابخانه‌های مؤلفه غیرانتزاعی را ترجیح می‌دهم.
- کامپوننت ها html/css خالص هستند. این فقط به این معنی است که اجزای دیزی در کاری که می توانند انجام دهند محدود هستند. اجزای دارای جاوا اسکریپت در مقایسه بسیار قدرتمندتر هستند.
نکته مهم، Flowbite دارای دو نسخه Flowbite معمولی و Flowbite React می باشد. من فقط در مورد Flowbite معمولی صحبت خواهم کرد و نه واکنش Flowbite زیرا فکر می کنم خوب نیست. Flowbite یک کتابخانه کپی و چسباندن است، به این معنی که شما نیازی به نصب چیزی ندارید، مانند این:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
مشکل همانطور که می بینید این است که React را پشتیبانی نمی کند. بنابراین باید با هر پیست، «class» را به «className» تغییر دهید. همچنین، این یک کتابخانه مؤلفه خالص html/css دیگر است.
مانند Flowbite اما بهتر است. این کتابخانه کامپوننت از React پشتیبانی می کند، بنابراین فقط کپی و جایگذاری کنید. همچنین به نظر من بسیار زیباتر به نظر می رسد.
کتابخانه مؤلفه بسیار شیک و حرفه ای. برخلاف سایر کتابخانه های مؤلفه قبلی، جاوا اسکریپت دارد و از نظر کارهایی که می تواند انجام دهد، قدرتمندتر است.
import { Button } from "@material-tailwind/react";
export default function Example() {
return (
<Button>Button</Button>;
<Button size="sm" className="rounded-lg">Button</Button>;
)
}
و همانطور که می بینید، می توانید به راحتی کامپوننت را با نوشتن مستقیم کلاس های tailwind utility شخصی سازی کنید. تنها “عیب” باقی مانده انتزاع است. شما نمی توانید ببینید که کامپوننت چگونه و با چه کلاس های tailwind ایجاد شده است.
یک کتابخانه مؤلفه کپی و جایگذاری. مشابه Material Tailwind به جز با انتزاع صفر. شما می توانید تمام کدهای سازنده یک جزء را ببینید و تمام CSS های مرتبط را ببینید. به طور کامل و آسان تمام قسمت های قطعات را سفارشی کنید. تنها “عیب” ممکن این است که برای مبتدیان کمتر مناسب است. از آنجایی که کنترل کامل سطح پایین را به شما می دهد، ممکن است برای کاربران با تجربه کمتر صمیمی تر باشد.
افتخار: TailwindUI
کتابخانه رسمی مؤلفه از Tailwind Labs. خیلی خوبه ولی 300 تومنه
PS: من را در توییتر دنبال کنید تا نکات داغ فناوری را دریافت کنید
https://twitter.com/Apestein_Dev
