Bootstrap یاد بگیریم یا Tailwind – مقایسه تخصصی و انتخاب

یکی از سئوالات مهم در حوزه فرانت‌اند و یادگیری طراحی سایت این است که Bootstrap یاد بگیریم یا Tailwind و این یک موضوع چالش برانگیز شده است ! هردوی این ابزارها یک فریمورک ( Framework ) برای زبان طراحی CSS هستند که شما پس از اتمام دوره‌های آموزش CSS باید به سراغ یکی از این موارد یا حتی سایر کتابخانه‌ها بروید تا بتوانید سرعت کدنویسی را افزایش داده و مهم‌تر از آن ، استانداردسازی را در پروژه لحاظ کنید .

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

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

• یادگیری Bootstrap برای کسانی که CSS را آموزش دیده‌اند ساده‌تر است
• یادگیری Tailwind به دلیل وجود بخش‌هایی مثل خط فرمان شاید برای یک دانشجوی ابتدایی ساده نباشد
• Bootstrap دستورات اصلی و جامع CSS جهت طراحی قالب را بهینه کرده
• Tailwind دستورات اضافی بسیار زیادی را در کتابخانه اصلی ایجاد می‌کند
• درک اسامی کلاس‌ها و دستورات Bootstrap نسبت به Tailwind ساده‌تر است
• المان‌های جاوا اسکریپتی در Bootstrap بسیار است اما Tailwind نیاز به کتابخانه‌های مجزای جی کوئری دارد
• Bootstrap یک کتابخانه آیکون اختصاصی دارد اما برای Tailwind نیاز به کتابخانه‌های مجزای آیکون دارید
• دیزاین المان‌های Bootstrap از نظر بصری به مراتب بهتر از Tailwind است
• امکان شخصی سازی فایل اصلی در Bootstrap وجود ندارد اما در Tailwind چرا
• امکان تعریف کلاس‌های بسیار شخصی در Bootstrap وجود ندارد اما در Tailwind چرا
• دسترسی راحت‌تر به رویدادهایی مثل hover و transition و حتی after و before در فایل html

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

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

چرا ادعا می‌شود که Tailwind بهتر و بهینه‌تر از Bootstrap است ؟

کتابخانه Tailwind به این شکل کار می‌کند که شما به سورس اصلی Tailwind متصل خواهید شد و سپس از اسامی کلاس‌ها و المان‌هایی که توسط Tailwind آماده شده است داخل پروژه استفاده خواهید کرد ، اما مثل بوت استرپ ، تمامی فایل کتابخانه Tailwind در داخل پروژه شما قرار ندارد و شما هربار که اقدام به بازنویسی فایل استایل Tailwind کنید ، باتوجه به اسامی کلاس‌ها و المان‌هایی که داخل فایل html به کار برده شده است ، فایل تیلویند شما از سورس اصلی Tailwind بارگیری خواهد شد .

درنتیجه ، تنها اسامی کلاس و المان‌هایی در داخل فایل اصلی Tailwind قرار خواهند گرفت که شما از آنها در پروژه استفاده کرده‌اید و خبری از موارد اضافه نیست ! در نتیجه این کار ، پروژه شما سبک خواهد شد .

اما در بوت استرپ ، شما باید فایل اصلی Bootstrap را در داخل پروژه خود اضافه کنید و شاید تنها از 1 یا 20 کلاس این فریمورک استفاده کنید و در نتیجه 1000 ها خط این کتابخانه داخل پروژه شما بالا استفاده است . Tailwind در حقیقت این نقص از فریمورک بوت استرپ را پوشش داده است که شما بتوانید از یک فریمورک استاندارد ، به اندازه‌ای که از آن نیاز دارید استفاده کنید و هرزمانی که نیاز به توسعه پروژه داشتید می‌توانید موارد بیشتری از کتابخانه را مجدد به فایل خودتان اضافه کنید .

البته یک خاصیت جالب Tailwind نیز اینجاست ! زمانی که شما مجدد قصد دارید تا فایل Tailwind خودتان را بازنویسی کنید ، کل پروژه شما بررسی خواهد شد و اگر از برخی اسامی کلاس که اکنون داخل فایل CSS وجود دارند در کدهای HTML خودتان استفاده نکرده باشید ، آنها نیز از فایل CSS حذف خواهند شد . پس شما هم به قسمت افزودن و هم به قسمت حذف دستورات اضافی دسترسی دارید .

یکی از ایرادات اصلی Tailwind چیست ؟

بالاتر گفتیم که شما می‌توانید یک فایل استایل سبک داشته باشید ، اما فریمورک Tailwind امکان بیشتری را نیز در اختیار شما قرار داده است . برای مثال شما اگر نیاز داشتید تا یک دستور بصورت اختصاصی بنویسید ، آن را بدون اینکه وارد فایل CSS خودتان شوید ، به کمک Tailwind ایجاد کرده و داخل فایل Tailwind بنویسید . برای مثال نیاز داریم تا یک فاصله از بالا به اندازه 20 پیکسل ایجاد کنیم . در حالت عادی وارد فایل style خودتان شده و دستور زیر را خواهید نوشت :

.div {
	top:20px;
}

اکنون شما در داخل Tailwind این امکان را دارید که دستور بالا را بصورت زیر بنویسید و بدون درگیر شدن ، آن را به فایل Tailwind اضافه کنید :

<div class="top-[20px]">

</div>

شما اگر syntax بالا را رعایت کنید ، می‌توانید هرزمانی که نیاز به دستورات اضافی داشتید ، بدون استفاده از صفت style و ایجاد یک استایل درون خطی که از نظر سئو و اصول طراحی نیز اشتباه است ، به همین سادگی دستورات بیشتر را اضافه کنید . اما اکنون ایراد این روش چیست ؟

اگر شما با اصول کدنویسی بهینه در استفاده از Tailwind آشنایی لازم را نداشته باشید ، ممکن است تعداد این دستورات بیشتر باشد و درنتیجه فایل Tailwind شما بجای سبک شدن ، سنگین‌تر نیز شود . این وجه تمایز اصلی بین Tailwind و بوت استرپ است . اکنون بهتر است به بررسی موارد لیست بالا بپردازیم تا هریک را دقیقا و عمیقا بررسی کنیم !

یادگیری Bootstrap ساده‌تر است

این یک حقیقت آشکار است . زمانی که شما CSS را بخوبی فرا گرفتید ، با مفهوم کتابخانه و فایل‌های استایل آشنایی دارید پس می‌توانید بسادگی از بوت استرپ بعنوان یک کتابخانه جانبی جهت کدنویسی بهتر و استاندارد استفاده کنید . تنها کاری که شما برای استفاده از بوت استرپ نیاز دارید ، افزودن آدرس فایل کتابخانه به پروژه HTML است ، همانند مثال زیر :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>

پس از آدرس دهی درست این فایل ، شما کافیست تا از دستورات بوت استرپ طبق doc آن استفاده کنید . همانطور که در بالاتر گفته شد شاید شما به بسیاری از دستورات داخل این کتابخانه نیازی نداشته باشید اما درهرصورت ، یک فریمورک استاندارد روی پروژه خودتان دارید . در مورد نصب تیلویند داستان کمی متفاوت است . شما برای اینکه این فریمورک را روی پروژه خودتان داشته باشید و بتوانید از آن استفاده کنید ، نیازی به اجرای آن از سورس اصلی ، توسط خط فرمان یا همان cmd دارید .

آیا برای شخصی که هنوز تازه از دنیای HTML و CSS خارج شده است ، توانایی درک و استفاده از محیط خط فرمان را طبق شرایطی که در doc کتابخانه تیلویند ذکر شده است دارد ؟ اگر راستگویانه برخورد کنیم باید گفت خیر !!! چرا که نصب تیلویند روی پروژه بصورت زیر است :

npm install tailwindcss @tailwindcss/vite


import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})


@import "tailwindcss";


npm run dev

اکنون اگر درمورد نصب کننده پکیج npm با یک دانشجوی دوره‌های HTML صحبت کنید ، مدت زیادی زمان لازم است تا او را در جهت نحوه استفاده از این فریمورک آشنا کنید . احتمال دارد حین استفاده از نصب کننده پکیج و یا پیکربندی پروژه که در همان ابتدای کار است به مشکلات زیادی برخورد کنید . تنها مشکل درمورد فریمورک بوت استرپ تنها این است که شما آدرس دهی کتابخانه را درست انجام نداده باشید . همین !!!

پس استفاده از بوت استرپ از همان ابتدا راحت است و شما پس از اتمام دوره‌های HTML و CSS با همان درک و ذهنیت بخش فرانت‌اند می‌توانید استفاده از کتابخانه بوت استرپ را آغاز کنید . پس به این ترتیب گزینه دوم لیست یعنی ” یادگیری Tailwind به دلیل وجود بخش‌هایی مثل خط فرمان شاید برای یک دانشجوی ابتدایی ساده نباشد ” را نیز بررسی کردیم .

Bootstrap دستورات اصلی و جامع CSS را بهینه کرده است

فریمورک بوت استرپ خصوصا در نسخه 5 ، ایرادات و نواقص نسخه 3 و 4 را از میان برداشت و اصلی‌ترین دستوراتی که در طراحی قالب به آنها نیاز است را داخل کتابخانه خود قرار داد . برای مثال دستورات زیر همگی اسامی کلاس‌های داخل بوت استرپ هستند :

.d-flex
.d-block
.d-table

.pt-1
.pt-2

.my-3
.mx-5

.top-100
.bottom-50

.position-relative
.position-absolute

داخل کتابخانه تیلویند ، اسامی این کلاس‌ها هنوز به اندازه و قدرت بوت استرپ نرسیده است اما در تیلویند که در گزینه بعدی بررسی خواهیم کرد ، تعدد این دستورات بسیار زیاد است و در بسیاری از موارد نیازی به آنها نیست ! پس در داخل بوت استرپ شما باید تایم کمتری را جهت یادگیری داکیومنت قرار دهید و درنتیجه سریع‌تر می‌توانید به اکثر دستورات آشنایی پیدا کنید .

Tailwind دستورات اضافی بسیار زیادی را در کتابخانه اصلی ایجاد می‌کند

کتابخانه تیلویند حقیقتا در این مورد تصمیم داشته است تا مثل بوت استرپ کار کند اما زیاده روی کرد !! برای مثال دستوراتی را در بخش فیلتر تصاویر بصورت زیر ایجاد کرده است :

<img class="contrast-50 ..." src="/img/mountains.jpg" />
<img class="contrast-100 ..." src="/img/mountains.jpg" />
<img class="contrast-125 ..." src="/img/mountains.jpg" />
<img class="contrast-200 ..." src="/img/mountains.jpg" />

اکنون جالب اینجاست که خودتان نیز مجدد می‌توانید برای قسمت contrast مقدار اضافه کنید مثل نمونه زیر :

<div class="contrast-[100]">

پس این حقیقتا کمی زیاده روی است . برای تمامی فیلترهای تصاویر که بصورت زیر هستند ، داخل تیلویند ، دستور و کلاس وجود دارد :

blur
brightness
contrast
drop-shadow
grayscale
hue-rotate
invert
saturate
sepia

بوت استرپ تمامی این موارد را بهینه کرده است و لذا شما نیازی ندارید تا ساعت‌ها پای داکیومنت این فریمورک نشسته و آن را یاد بگیرید . دستورات فیلتر یا امثال آن ، مواردی هستند که نسبت به دستوراتی همچون padding و margin و display بسیار کمتر مورد استفاده هستند ، لذا از این نظر ، بوت استرپ عملکرد بهتری دارد .

درک اسامی کلاس‌ها و دستورات Bootstrap نسبت به Tailwind ساده‌تر است

اگر به اسامی کلاس‌های بوت استرپ دقت کنید ، این اسامی بسیار ساده و قابل فهم هستند به این دلیل که اسامی کلاس‌ها از property-name و value در CSS ایجاد شده است . در تیلویند اسامی برخی کلاس‌ها همانند بوت استرپ قابل فهم هستند اما درمورد برخی دیگر ، اسامی کمی نیاز به زمان جهت یادگیری دارد . برای مثال اسامی زیر در تیلویند هستند :

text-xs
font-size: var(--text-xs); /* 0.75rem (12px) */ 
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */

text-sm
font-size: var(--text-sm); /* 0.875rem (14px) */ 
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */

text-base
font-size: var(--text-base); /* 1rem (16px) */ 
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */

text-lg
font-size: var(--text-lg); /* 1.125rem (18px) */ 
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */

برای مثال این موارد اسامی کلاس‌های اندازه فونت در تیلویند هستند اما در داخل بوت استرپ این کلاس‌ها ، بصورت زیر هستند :

.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6

کلمه fs مخفف font-size است پس یادگیری و در یاد ماندن آن نسبت به تیلویند بسیار راحت است .

المان‌های جاوا اسکریپتی در Bootstrap بسیار است

اگر از کتابخانه بوت استرپ استفاده کنید ، دسترسی به اسلایدر ، منو ، آکاردئون و رویدادهای بسیار زیاد جاوا اسکریپتی دارید درحالی که داخل تیلویند شما برای ایجاد اسلایدر ، منوی واکنشگرا و المان‌هایی از این دست ، باید از کتابخانه‌های جانبی استفاده کنید که در اینصورت حجم پروژه شما افزایش خواهد یافت که درنتیجه درکل نسبت به استفاده از بوت استرپ ، بازهم حجم پروژه شما بالا خواهد رفت .

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

حتی اگر از کتابخانه jQueryUi نیز استفاده کنید ، بازهم دو کتابخانه بیشتر روی پروژه اجرا شده است ! چرا ؟؟ چون به کتابخانه اصلی جی کوئری نیز نیاز دارید !!! اما اگر از بوت استرپ نسخه 5 استفاده کنید ، جهت استفاده از کتابخانه جی کوئری بوت استرپ ، حتی نیاز به فراخوانی jQuery نیز نیست .

Bootstrap یک کتابخانه آیکون اختصاصی دارد

برای اینکه آیکون‌های مورد نیاز را داخل سایت خودتان قرار دهید ، می‌توانید از کتابخانه‌هایی همچون fontAwesome استفاده کنید که کار کردن با اینگونه کتابخانه‌ها ، ممکن است کمی دشوار باشد ( مثل پیدا کردن نسخه مناسب و دانلود و قرار دادن روی سایت ) ، اما زمانی که شما از بوت استرپ استفاده کنید ، دسترسی به کتابخانه آیکونی بنام bootstrap-icon دارید .

مزیت این کتابخانه در اینجاست که توسط خود بوت استرپ ارائه شده و تایپوگرافی آنها تماما با خود بوت استرپ سازگار است و استفاده از آن نیز برای افراد مبتدی مشکلی را ایجاد نمی‌کند . پس همانند پشتیبانی از المان‌های بسیار جی کوئری توسط بوت استرپ ، درمورد آیکون‌ها نیز یک خصوصت خوب دارد .

دیزاین المان‌های Bootstrap از نظر بصری به مراتب بهتر از Tailwind است

بوت استرپ با توجه به طراحی‌هایی که برای المان‌های فرم ، دکمه‌ها ، منوها ، آکادئون و … درنظر گرفته است ، در مقایسه با تیلویند کمی ظرافت بهتری دارد ( البته این نظر ممکن است از جهت شخصی باشد ) ولی المان‌های بوت استرپ نمایی ساده‌تر و جنبه بصری مناسبی دارند .

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

امکان شخصی سازی فایل اصلی در Bootstrap وجود ندارد

همانطور که در بالاتر اشاره کردیم ، شما قادر هستید تا در حین کدنویسی و باتوجه به نیاز پروژه ، به المان‌های تیلویند ، فایل اصلی کتابخانه را به اندازه نیاز خودتان تولید کنید اما درمورد بوت استرپ شما تمام کتابخانه را چه کم استفاده کنید چه زیاد ، باید تمامی آن را داخل پروژه قرار دهید .

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

امکان تعریف کلاس‌های بسیار شخصی در Tailwind

اگر ابتدای این مقاله را بخوبی مطالعه کرده باشید ، مثالی را خدمت شما درمورد استایل اختصاصی در تیلویند ارائه کردیم و گفتیم که برحسب نیاز می‌توانید بدون اینکه از استایل درون خطی یا همان صفت style استفاده کنید ، خودتان دست به کار شده و کد مورد نظر را طبق اصول کتابخانه تیلویند اجرایی کنید و البته اشکالات مربوط به آن را نیز خدمتتان شرح دادیم .

دسترسی راحت تر به رویدادهایی مثل hover و transition و حتی after و before در Tailwind

شما برای ایجاد رویدادهایی همچون hover و transition و … در داخل بوت استرپ دست و بال بسته‌ای دارید . اما در تیلویند به اینصورت نیست ! شما برای ایجاد افکت transition می‌توانید از داخل فایل HTML نیز اقدام به ایجاد آن کنید . کاری که تیلویند خواهد کرد این است که دستورات شما را به داخل فایل CSS مربوط به Tailwind انتقال داده و خودش دستورات لازم را خواهد نوشت ! برای مثال به دستور زیر دقت کنید :

transition-all
transition-property: all;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */

زمانی که شما برای المانی از کلاس transition-all استفاده کنید ، افکت شما با زمان 150 میلی ثانیه و افکت خاصی در cubic-bezier برای شما اجرا خواهد شد . آیا امکان شخصی سازی این transition وجود دارد ؟؟؟ بله ! مثال زیر را مشاهده کنید :

<div class="bg-blue-500 transition delay-150 duration-300 ease-in-out"></div>

پس به این ترتیب می‌توان دستور transition را شخصی سازی کرد . یا برای مثال می‌توانید برای ایجاد hover بصورت زیر عمل کنید :

<div class="menu-head bg-red hover:bg-dark"></div>

پس از اینکه شما دستور بررسی و بازنویسی فایل استایل را انجام دادید ، بصورت خودکار دستور هاور و تغییر رنگ پس زمینه برای این div اعلام خواهد شد . این یکی از مزیت‌هایی است که علاقمندان به تیلویند بسیار با آن پز می‌دهند اما حقیقتا استفاده از آنها باید بصورت تخصصی و صحیح انجام شود .

نتیجه گیری

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

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا