معرفی و مقایسه فریم ورک Tailwind CSS و Bootstrap

‍

اکثر توسعه دهنده ها با فریمورک هایی مثل Bootstrap رابطه خوبی دارن چون خیلی راحت میشه سمت فرانت اند رو باهاش توسعه داد و می تونن تمرکز اصلی رو بزارن روی قسمت های مهم دیگه ولی برای توسعه دهنده های فرانت اند ای که نیاز به درجه بالایی از شخصی سازی دارن Tailwind CSS خیلی انعطاف پذیری بیشتری نسبت به Bootstrap داره.

توی این پست می پردازیم به معرفی فریمورک Tailwind CSS، Bootstrap و تفاوتشون. و اینکه با توجه به چه شرایطی باید کدوم رو انتخاب کنیم، منظور از utility-first چیه و در آخر آموزش نصب تیلوند سی اس اس.

معرفی فریم ورک تیلوند سی اس اس (Tailwind CSS)

با توجه به گفته های داکیومنت رسمی، Tailwind CSS یک فریمورک Utility-first هست که دارای کلاس های از پیش آماده شده زیادی مثل flex, pt-4, text-center و rotate-90 هستش که می تونید هر طوری خواستید بصورت مستقیم داخل سند HTML کنار هم استفاده کنید.

پ.ن:‌ Tailwind CSS بصورت خودکار فایل ها رو شناسایی میکنه و کلاس هایی که توی سند HTML استفاده نکردید رو حذف میکنه (ابزار PurgeCSS هم مشابه این کارو انجام میده) در نتیجه حجم فایل نهایی کمتر میشه به گفته خودشون سایز بیشتر پروژه ها به زیر 10KB میرسه. یادتون نره مسیر فایل هایی که باید توسط Tailwind CSS شناسایی بشه رو داخل کانفیگ تعریف کنید.

چندتا نکته در مورد Tailwind CSS:

• نیاز به دانش CSS بیشتری دارید.
• اولین فریم ورک Utility-first نیست ولی محبوب ترین بین بقیه هست.
• تمرکز اصلی این فریمورک روی این بوده که سند HTML خودتون رو ترک نکنید پس می تونید بیشتر کلاس ها رو بصورت آماده داشته باشید و نیاز به ساخت کلاس شخصی داخل یک فایل جدا نیست.
  

خیلی ها یکی از نقطه ضعف های Tailwind CSS رو شلوغ شدن HTML شون میدونن ولی با قانون زیر می تونید حلش کنید:

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

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

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

مهم ترین تفاوت بین این دو فریمورک این هست که Tailwind CSS یک کیت رابط کاربری نیست. برخلاف فریمورک هایی مثل بوت استرپ، بولما و فاندیشن؛ تیلوند سی اس اس فاقد هیچ گونه قالب پیش فرض و کامپوننت از پیش آماده شده هست.

آیا Tailwind CSS از Bootstrap بهتر هستش؟

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

منظور از Utility-first چیه؟

با توجه به گفته های داکیومنت اصلی، یعنی ساخت کامپوننت های پیچیده از utilities های اولیه.

به زبون ساده:

به کلاس های سادهِ CSS که محدود به یک پراپرتیِ CSS هستن، utilities می گویند.

به مثال زیر توجه کنید،‌ هر کدوم از موارد زیر یک utility به حساب میاد.

text-center = text-align: center;

bg-white = background-color: white;

block = display: block;

آموزش نصب Tailwind CSS

۱. اگه هدفتون فقط تست تیلوند سی اس اس هستش می تونید از CDN رسمی خودش استفاده کنید ولی بهتون پیشنهاد می کنم که به Tailwind Play هم سر بزنید. یک زمین بازی پیشرفته تحت وب ولی با امکانات زیر:

• شخصی سازی فایل tailwind.config.js
• استخراج کردن کلاس ها با apply@ (ساخت کامپوننت)
• کامل کننده کد همراه با پیش نمایش زنده (مثل vscode)

۲. در صورتی که علاقه دارید از بدونید نحوه راه اندازی تیلوند سی اس اس برای یک پروژه واقعی چجوریه به این Installation: Tailwind CLI - Tailwind CSS آدرس سر بزنید.

منابع