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

صفحات وب واکنش گرا معمولا با فریم ورک هایی مثل Bootstrap, Foundation, Bulma پیدا سازی میش. این فریم ورک ها رو به عنوان کیت رابط کاربری(UI) یا Component-based هم میشه صدا زد.

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

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

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

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

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

چندتا نکته:

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

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

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

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

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

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

تفاوت سینتکس

آیا 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 آدرس سر بزنید.

پند و اندرز

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

منابع