فریمورک Tailwind CSS در ریکت چیست؟! + مزایا و معایب تیلویند در ری اکت !

اگه از فریمورک Tailwind CSS در ری اکت استفاده کنید، دیگه نمیتونید کنار بزاریدش 🙂

تیلویند در ریکت انقدر فوق العادس که اگه باهاش آشنا بشید، دنیای بدون Tailwind css رو نمیتونید تصور کنید !!

با فِرانت اِندی همراه باشید تا فریمورک Tailwind CSS رو جامع و تخصصی بررسی کنیم و ببینیم Tailwind CSS چیه… 🙂

فریمورک Tailwind CSS چیست ؟

تیلویند سی اس اس ( Tailwind CSS ) یک فریمورک طراحی CSS هست که ابزار ها و کلاس های آماده CSS در اختیار ما میزاره.

دیگه نیازی نیست مثل قدیما یک فایل CSS بسازیم و Style های CSS بنویسیم!

فقط کافیه از اسم کلاس های آماده ای استفاده کنیم که خود Tailwind CSS در اختیار ما میزاره!

بر خلاف اکثر فریمورک های CSS که کامپوننت های آماده و از پیش ساخته شده در اختیار ما میزاشتن، Tailwind هیچ کامپوننت آماده ای به ما نمیده!

صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا ما با استفاده از این کلاس ها بتونیم به صفحات خودمون استایل بدیم.

با این روش دیگه نیازی به ایجاد فایل های css هم نداریم!

تو تیکه کد های زیر، ما به دکمه ی خودمون به 2 روش استایل CSS دادیم ...

استایل با فریمورک Tailwind CSS

( به کمک تیلویند )

<button class=&quotbg-blue-400 p-4 text-white&quot>
    من یه دکمه ی الکی ام
</button>

استایل با CSS خام

( بدون تیلویند )

.btn {
    background-color: blue;
    color: white;
    padding: 1rem;
}

اگه به تیکه کد سمت راست نگاه کنیم، میبینیم که دیگه از استایل های خام CSS برای استایل دادن به button خودمون استفاده نکردیم! صرفا از یکسری class های آماده استفاده کردیم. اما خروجی هر 2 تیکه کد یکسانه !!!این کلاس ها ( class ) دقیقا همون کلاس های Tailwind css هستن که میتونیم ازشون برای استایل دهی صفحات خودمون استفاده کنیم.

فریمورک Tailwind CSS رایگانه ؟!

بله 🙂 Tailwind CSS کاملا رایگان و Open Source هست !

حتی ما میتونیم با مراجعه به Tailwind CSS Github تو توسعه این کتابخونه مشارکت داشته باشیم! ( در حال حاضر 273 نفر در توسعه این فریمورک مشارکت داشتن )

طراحی آسون تر با Tailwind CSS در فرانت اند !

اگه از فریمورک Tailwind CSS استفاده کنیم، مزایای زیر رو برامون داره :

• استایل های پروژه خودمون رو بر اساس یک استاندارد و چارچوب مشخص جلو میبریم ( تو پروژه های تیمی خیلی سرعت توسعه رو بالا میبره )
• دسترسی به بیش از 4394 رنگ، margin , padding , z-index و ..
• عدم استفاده از استایل های بلا استفاده ( بر خلاف سایر فریمورک های CSS که اهمیتی نمیدن که به یک استایل مشخص نیازی دارید یا خیر، درهرصورت اون استایل رو به پروژتون اضافه میکنن تا اگه نیاز داشتید ازش استفاده کنید )
• افزایش چشمگیر سرعت توسعه پروژه ( سرعت استایل دهی )
• کاهش حجم استایل های پروژه ( کاهش حجم فایل های css. پروژه )

حالا که بحث مقایسه Tailwind CSS و سایر فریمورک های CSS پیش اومد، بیاید فریمورک تیلویند رو با یکی از محبوب ترین CSS Freamwork ها مقایسه کنیم ..

مقایسه Tailwind CSS و Bootstrap ( کدوم بهتره ؟ )

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

بزارید واضح تر بگیم :

مقایسه Tailwind CSS و بوت استرپ مثل مقایسه خیار و پراید هست! ( چون اصلا کاربری یکسانی این 2 تا ندارن )

درواقع Bootstrap از ده ها کامپوننت آماده تشکیل شده که این کامپوننت ها به کمک CSS و JS آماده شدن اما Tailwind CSS هیچ کامپوننت آماده ای نداره و صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا سرعت توسعه و استایل دهی ما بیشتر بشه.

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

در واقع بوت استرپ کاری نداره که از کدوم Component این فریمورک میخواید استفاده کنید، همون اول کار همه کامپوننت هارو به پروژه شما اضافه میکنه.

اما در مقایسه تیلویند و بوت استرپ میشه گفت که هر دو قابل شخصی سازی ( Customize ) هستن.

درنهایت همیشه سعی کنید انتخاب اولتون Tailwind CSS باشه و سراغ فریمورک هایی که کامپوننت آماده در اختیارتون میزارن، نرید.

اما در جریان باشید که میشه تیلویند رو در کنار سایر Css Freamwork ها مثل کتابخانه MUI استفاده کرد!

چه شرکت ها و کمپانی هایی از فریمورک Tailwind CSS استفاده میکنن ؟!

از اونجاییکه فریمورک تیلویند سی اس اس بشدت محبوب و فوق العادس، شرکت های خیلی بزرگ و مشهوری رفتن سراغش!

برخی از کمپانی های مشهور و بزرگ که از فریمورک Tailwind CSS استفاده میکنن، عبارتند از :

1. گوگل ( Google )
   
2. اسپاتیفای ( Spotify )
   
3. نتفلیکس ( Netflix )
   
4. ناسا ( Nasa )
   
5. مایکروسافت ( Microsoft )
   
6. لاراول ( Laravel )
   
7. گیت هاب ( Github )
   
8. و …
   

ابزار Tailwind Play !

تیم توسعه Tailwind CSS یه ابزار خیلی خفن و باحال در اختیار ما گذاشتن به اسم Tailwind Play !

ابزار Tailwind Play یک ادیتور آنلاین هست که روی مرورگر ما اجرا میشه و به ما اجازه میده که استایل های Tailwind CSS رو بصورت زنده تست کنیم و حتی خروجیش رو بصورت زنده ببینیم 🙂

این ابزار دقیقا مثل CodePen هست با این تفاوت که بصورت اختصاصی برای فریمورک Tailwind CSS نوشته شده.

ما با مراجعه به لینک پاراگراف بالا ( سایت تیلویند ) میتونیم از این ابزار استفاده کنیم. ویژگی های این ابزار عبارتند از :

1. یک HTML Editor قدرتمند که autocompletion ( تکمیل کننده خوکار کد ) داره!
   
2. یک CSS Editor قدرتمند!
   
3. تنظیمات جهت کانفیگ کردن Editor این ابزار!
   
4. فرمت کردن کد با یک کلیک ( Code Formatter )
   
5. یک Version Switcher ( جهت تعویض نسخه Tailwind CSS به نسخه های قدیمی تر یا جدیدتر )
   
6. یک Layout Switcher !
   
7. قابلیت Dark Mode / Light Mode در ویرایشگر !
   

چطور از فریمورک Tailwind CSS تو پروژمون استفاده کنیم ؟

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

ما از فریمورک تیلویند سی اس اس تو هر پروژه ای میتونیم استفاده کنیم ( هر فریمورک یا کتابخانه ای )

دوستان برای مطالعه ادامه این مقاله + تیکه کدها و مثالهای بیشتر لطفا روی لینک زیر کلیک کنید :

Tailwind CSS در ری اکت