آشنایی با فریم ورک Tailwind CSS و مقایسه اون با Bootstrap 💀

فریم ورک Tailwind یک فریمورک CSS مبتنی بر ایده utility-first هست که تو مدت کوتاهی تونسته طرفدارای بسیار زیادی و پیدا، و محبوبیت زیادی و کسب کنه. دادن قابلیت توسعه سریع به افراد برای طراحی و توسعه رابط کاربری یکی از دلایل بالا رفتن میزان محبوبیت این فریم ورک هست.

⏬مزایای فریم ورک Tailwind⏫

1️⃣ کنترل روی استایل‌دهی به المان‌ها

سیستم Tailwind یک استایل پیشفرض برای المان‌ها نداره و شباهتی تو این زمینه با سایر فریم ورک ها نداره. به همین دلیل شما می‌تونید کنترل کامل روی ظاهر المان‌ها داشته باشید.

2️⃣ پروسه استایل‌دهی سریع‌تر

زمانیکه بحث به استایل‌دهی به المان‌های HTML میرسه هیچ فریمورکی نمی‌تونه به سرعت Tailwind این کار و برای شما انجام بده. نتیجه این موضوع خروجی گرفتن سریع کاربر از المان‌های HTML میشه.

3️⃣ رسپانسیو

تمام المان‌ها و استایل‌های مربوط به Tailwind بصورت رسپانسیو شده به شما ارائه میشه. به همین دلیل این فریمورک از میزان رسپانسیو و Mobile first بودن بالایی برخوردار هست.

4️⃣ کتابخانه های کاربردی

خیلیا معتقدن Bootstrap به دلیل داشتن کامپوننت های آماده، یه پله از Tailwind جلو تره.
اتفاقا کتابخانه های کاربردی زیادی تو این بحث برای Tailwind وجود داره که کامپوننت های آماده و به ما تحویل میدن.
بین این کتابخانه ها Flowbite و بهتون پیشنهاد میکنم.

فرق بین Tailwind با Bootstrap چیه؟

فریم ورک Bootstrap برای طراحی و توسعه صفحات وب سمت کاربر به صورت واکنش گرا محسوب میشه.
این فریم ورک رایگان و اپن-سورسه که با استفاده از کلاس ها و کامپوننت های از پیش آماده شده باعث تسریع روند توسعه میشه. در مقابل،‌ Tailwind محبوب ترین فریم ورک CSS با ایده ی Utility-first برای توسعه سریع رابط کاربری محسوب میشه 👨‍💻

آیا Tailwind از Bootstrap بهتره؟

اگه پروژه شما نیاز به شخصی سازی زیادی داره، یا از یک تم تکراری استفاده نمی کنید و علاقه بیشتری به CSS و خلاقیت دارید، Tailwind گزینه بهتری هست.


در پایان اگه Tailwind و در مقابل Bootstrap قرار بدیم، متوجه میشیم که هر دو مزایا و معایب خودشون و دارن. Tailwind برای توسعه دهندگان باتجربه که می‌خوان کنترل کاملی بر طرح های خود داشته باشن، عالیه. Bootstrap برای مبتدیانی که میخوان سریع شروع به کار کنن انتخاب بهتریه.


Tailwind Document 🌐

#bootstrap #tailwind
@CodeModule

5 کتابخانه کاربردی که component های آماده tailwind-css ارائه میدن🔥

1️⃣Flowbite

2️⃣Tailwind Elements

3️⃣Tailwind Templates

4️⃣Daisy UI

5️⃣Tailwind UI


#tailwind
@CodeModule

این سایت کمک می‌کنه سریع تر کد بزنی! 💀

قطعا براتون پیش اومده که مجبور باشید یه سری استایل های پیور و به کلاس های tailwind ریفکتور کنید، اما حوصله و وقتشو ندارید.

با استفاده از این سایت، خیلی راحت میتونید کدهای خام css و به کلاس های tailwind تبدیل کنید 😎

🔵tailwind converter


#tools #tailwind
@CodeModule

بهینه سازی کد با ابزار tailwind-merge 💀

کتابخانه tailwind-merge یک ابزار قدرتمند برای توسعه دهندگانی هست، که از Tailwind CSS استفاده می‌کنن. هدف اصلی این کتابخانه، ترکیب کلاس‌های تکراری در پروژه‌های Tailwind CSS و جلوگیری از تضادهای احتمالی هست.

ویژگی‌های اصلی tailwind-merge ⬇️

ترکیب کلاس‌های تکراری: اگه چندین کلاس Tailwind که متناقض هستن (مثل p-4 و p-2) به یک تگ اضافه بشن، tailwind-merge به‌طور خودکار تنها یکی از اون هارو(آخرین) و نگه می‌داره و بقیه رو حذف می‌کنه.

افزایش خوانایی و بهینه‌سازی: با حذف کلاس‌های تکراری و متناقض، کد نهایی شما خواناتر و بهینه‌تر خواهد بود، که منجر به کاهش حجم کد CSS تولید شده و افزایش عملکرد صفحه وب می‌شود.

ادغام کلاس‌ها در زمان واقعی: این کتابخانه می‌تونه به‌طور دینامیک در هنگام ساختن پروژه‌های جاوااسکریپت، کلاس‌ها رو ترکیب کنه، بنابراین نیازی به عملیات دستی یا استفاده از ابزارهای دیگه نیست.


این کتابخانه، به خصوص برای پروژه‌های بزرگ و پیچیده که از تعداد زیادی کلاس Tailwind استفاده می‌کنن، بسیار مفیده و می‌تونه به کاهش سردرگمی و پیچیدگی کد کمک کنه⚡️


#tailwind #tools
@CodeModule

پلاگینی برای مرتب سازی کلاس‌های tailwind 😎

🔵اخیرا یک پلاگین کاربردی و جدید به اسم prettier-plugin-tailwindcss ریلیز شده، که ترکیبی از پلاگین های prettier و tailwindCss هست و کار جفتشون رو یکجا انجام میده.

این پلاگین قابلیت اینو داره که فاصله های اضافی رو در کلاس های تیلویند پاک و مرتب کنه و همچنین، اگه دوتا کلاس مشابه به یک المنت داده باشید یکیشون رو اتوماتیک پاک، و هشدار رو از بین میبره. یکی دیگه از ویژگی این پلاگین اینه که اتوماتیک ترتیب کلاس هارو طبق استاندارد ها، میچینه و مرتب میکنه.

این پلاگین خفن می‌تونه سرعت کلاس دهی شما رو بهبود ببخشه و کدتون رو دائم مرتب و بهینه نگه داره. برای اطلاعات بیشتر و همچنین نحوه نصب، میتونید مقاله زیر و مطالعه کنید 🏖️


🔵Article

#tailwind #plugin #prettier
@CodeModule