فریم ورک Tailwind دگرگونی در فرانت با نگاه جدید

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

تعریف کلی فریم ورک

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

Tailwind یک چارچوب CSS است که با شعار "Utility-First CSS Framework" شناخته می‌شود و در این بخش متمایز می‌شود. در حالی که بسیاری از فریم‌ورک‌های دیگر مانند Bootstrap بیشتر از همه بر روی مفهوم کامپوننت متمرکز هستند، Tailwind به نحوی طراحی شده که از کلاس‌های utility برای تعریف و اعمال ویژگی‌ها و استایل‌ها استفاده می‌کند.

تفاوت تیلویند با سایرین

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

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

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

بجای شخصی سازی خودتان بسازید

تفاوت بین این دو نوع فریم‌ورک به صورت زیر خلاصه می‌شود: در Tailwind، شما هیچ کامپوننت آماده‌ای نخواهید یافت، اما این فریم‌ورک با حذف هر نوع استایل پیش‌فرض برای عناصر مانند دکمه‌ها (Buttons)، حاشیه (Margin)، پس‌زمینه (Background) و موارد مشابه، حتی سبک‌های مرورگر، به شما امکان می‌دهد از ابتدا همه چیز را سفارشی‌سازی کنید.

بنابراین، به جای اینکه فریم‌ورک به شما کامپوننت‌هایی با استایل‌های مشخص ارائه دهد که شکل خاصی به کامپوننت‌ها بدهند، Tailwind کلاس‌هایی ارائه می‌دهد. به عبارت دیگر، شما کلاس‌هایی برای ایجاد حاشیه (Padding)، تغییر رنگ پس‌زمینه (Background Color) و موارد مشابه پیدا می‌کنید، اما این کلاس‌ها بر اساس تنظیماتی که در یک فایل جاوا اسکریپت تعیین می‌کنید، تولید می‌شوند. این به شما امکان می‌دهد تا یک سیستم طراحی شخصی‌سازی شده با استفاده از این کلاس‌ها ایجاد کنید.

به عنوان مثال، با تنظیمات جاوا اسکریپت می‌توانید اندازه صفحه نمایش‌ها را مشخص کنید و استایل‌ها را به گونه‌ای تغییر دهید که به اندازه‌های مختلف ریسپانسیو و سازگار باشد. برای هر اندازه صفحه نمایش، کلاس‌های padding به صورت خودکار ایجاد می‌شوند، مثلاً کلاسی مانند sm:p-1 برای صفحات کوچک‌تر و lg:p-1 برای صفحات بزرگتر. این سیستم با استفاده از جاوا اسکریپت پویا می‌شود.

این مقایسه بین Bootstrap به عنوان نمونه‌ای از فریم‌ورک مبتنی بر کامپوننت و Tailwind به عنوان نمونه‌ای از فریم‌ورک Utility-First است. مزایا و معایب هر فریم‌ورک به توجه به نیازها و ترجیحات شما متغیر هستند و این مقایسه به شما کمک می‌کند تا فریم‌ورک مناسبی را برای پروژه‌های خود انتخاب کنید.

اندازه فایل خروجی متحیر کننده

اهمیت حجم نهایی فایل CSS بسیار حائز اهمیت است. کمیت کل فایل‌های مورد استفاده در وب‌سایت‌ها به عنوان یک عامل کلیدی در بهینه‌سازی کارایی سایت‌ها محسوب می‌شود. هر چه حجم فایل‌های سایت کمتر باشد، زمانی که مورد نیاز برای بارگذاری یا دانلود آنها در دستگاه کاربران کاهش می‌یابد و به‌موازات این امر، سرعت بارگذاری و عملکرد سایت افزایش می‌یابد. بنابراین، این امر باید به جدیت مورد توجه قرار گیرد.

یک مقایسه اندازه فایل CSS بین فریم‌ورک Tailwind و چندین فریم‌ورک معروف دیگر در جدولی در مستندات رسمی Tailwind ارائه شده است. این مقایسه بر روی یک نسخه معمولی از فایل CSS انجام شده و همچنین نسخه‌های Minify (فایلی که فضاها و نمادهای اضافی از آن حذف شده است) و نیز فایل‌های فشرده با استفاده از الگوریتم‌های Gzip و Brotli مورد بررسی قرار گرفته‌اند. اما باید توجه داشت که حجم نهایی فایل CSS Tailwind به صورت پیش‌فرض نسبت به سایر فریم‌ورک‌ها بزرگتر است. این موضوع به این دلیل است که Tailwind به طور پیش‌فرض تمام کلاس‌ها و استایل‌ها را شامل می‌شود.

اما این امکان وجود دارد که حجم فایل خروجی را با تنظیمات مناسب کاهش دهید. از این رو، توسط Tailwind، در هنگام اجرای فرآیند Build، امکان Tree-shaking را فراهم می‌کند. همچنین می‌توانید تنظیمات را به دلخواه تغییر دهید و حجم فایل خروجی را کاهش دهید. به عنوان مثال، اسناد رسمی Tailwind در مورد استفاده از فریم‌ورک برای سایت Firefox Send حرف زده‌اند که از Tailwind استفاده کرده‌اند و حجم فایل CSS موجود در آن تنها 14.4 کیلوبایت (نسخه Minify غیر‌فشرده) است. با استفاده از الگوریتم‌های فشرده‌سازی Gzip، حجم این فایل تا به 5.2 کیلوبایت کاهش یافته است.

برای کاهش حجم فایل CSS می‌توانید از روش‌های مختلفی استفاده کنید. یکی از بهترین و ساده‌ترین روش‌ها استفاده از ابزار Purgecss است. این ابزار فایل‌های پروژه شما را برای هر کلاسی که استفاده می‌کنید جستجو می‌کند و سپس کلاس‌هایی که بی‌استفاده هستند را حذف می‌کند. به عنوان مثال، اگر یک فایل CSS دارای 300 کلاس باشد و شما تنها از 50 کلاس آن استفاده کرده باشید، این ابزار 250 کلاس بی‌استفاده را حذف می‌کند.

برای اطلاعات بیشتر در مورد این ابزار، می‌توانید به سایت مربوطه و مستندات رسمی Tailwind مراجعه کنید.

بهره‌گیری از ابزار‌های Tailwind برای کاهش حجم فایل CSS از اهمیت ویژه‌ای برخوردار است. اگر از دلایل خاصی از ابزار‌های قبلی استفاده نمی‌کنید، می‌توانید از روش دیگری برای کاهش حجم فایل استفاده کنید، که دستکاری در فایل تنظیمات Tailwind را شامل می‌شود. به عنوان مثال، فایل پیش‌فرض Tailwind شامل بیش از 90 رنگ مختلف است. اما احتمالاً از تمام این رنگ‌ها در طراحی خود استفاده نمی‌کنید. برای مثال، ممکن است تنها یک تعداد محدود از رنگها را به عنوان رنگ متن استفاده کنید و از دیگرها به عنوان پس‌زمینه استفاده ننمایید. در این صورت، می‌توانید این رنگها را در تنظیمات حذف کنید.

همچنین، هر گونه ویژگی یا خصوصیتی که در طراحی خود استفاده نمی‌کنید را غیرفعال کنید. به عنوان مثال، اگر از ویژگی Float در طراحی خود استفاده نمی‌کنید، می‌توانید این ویژگی را از تنظیمات حذف کنید، که این کار باعث حذف کلاس‌های غیرفعال می‌شود.

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

واضح است که تغییر تنظیمات Tailwind به صورت دستی می‌تواند زمان‌بر باشد. در این مورد، از ابزار‌های Build و ساخت مانند Vite استفاده کنید. این ابزار‌ها به طور خودکار تمامی مراحل بالا را انجام داده و حجم فایل‌ها را به طور چشم‌گیری کاهش می‌دهند. به عبارت دیگر، تغییراتی که ساعت‌ها یا حتی روزها طول می‌کشد، به سرعت و به صورت خودکار انجام می‌شود. به کمک فریم‌ورک Tailwind، می‌توانید دنیای طراحی و توسعه وب را دگرگون کنید و به بهینه‌سازی و اصلاح کدهای خود پردازید.

سخن پایانی

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

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

از آنجا که سرعت لود وبسایت اهمیت زیادی دارد و به تجربه کاربری کاربران تأثیر مستقیم دارد، TailwindCSS به عنوان یک فریم‌ورک CSS انعطاف‌پذیر و بهینه‌ساز می‌تواند به شما کمک کند تا وبسایتی سریع و کارآمد ارائه دهید. بنابراین، استفاده از این فریم‌ورک را به شدت توصیه می‌کنیم و آن را به عنوان یک ابزار اساسی در جعبه ابزار توسعه وب خود قرار دهید.