مزایای فریمورک سی اس اس Tailwind
در این مطلب قصد دارم شما را با یک فریمورک قدرتمند برای css آشنا کنم. فریمورک Tailwind یک فریمورک حرفه ای برای هر نوع و هر سطح کاری است که شما می توانید از آن در پروژه های خود به سادگی استفاده کنید. و در این مطلب ما قصد داریم بعضی از مزایای آن را برای شما معرفی کنیم و اطلاعاتی در رابطه با آن را با شما اشتراک بگذاریم. به شما اطمینان میدهم با استفاده از Tailwind چیزی بیشتر از یک فریمورک سنتی یا سفارشی شده را تجربه خواهید کرد.
وب سایت رسمی Tailwind:
مزایای Tailwind:
شخصی سازی
این فریمورک به شکل کامل از پایه طراحی شده است تا بتواند به شکل فوق العاده ای قابل تنظیم و شخصی سازی باشد. در ایتدا این فریمورک شامل تنظیمات اولیه ای است که شما به سادگی می توانید این پیکربندی پیشفرض را تغییر دهید و یا بازنویسی کنید که این کار از طریق یک فایل به نام tailwind.config.js در درون پروژه شما به سادگی امکان پذیر است. همه چیز از رنگ ها گرفته تا اندازه فونت ها ،فاصله ی فونت ها و... با استفاده از فایل تنظیمات آن و به راحتی قابل تنظیم هستند. نیازی نیست تا خیلی با اصل فریمورک کلنجار بروید تنها کافیست بفهمید که میاز است کدام کلاس را برای رسیدن به نتیجه دلخواه بازنویسی (override) کنید.
برای دریافت اطلاعات بیشتر در رابطه با شخصی سازی آن میتوانید به لینک زیر مراجعه کنید:
https://tailwindcss.com/docs/configuration/
سیستم طراحی Built-in
یکی از مزایای دیگری که فایل پیکربندی این فریمورک برای شما فراهم می کند این است که به شما یک سیستم طراحی (design system) برای کار را میدهد. در بیشتر موارد ، در صورت استفاده از فاصله های ثابت ،اندازه ،رنگ و غیره طراحی شما به شکل بهتری دیده می شود. و از آنجایی که Tailwind به شما این امکان را میدهد تا از قبل تمام این موارد را پیکربندی کنید (یا پیشفرض خودش درصورتی که فایل تنظیمات را تغییر ندهید) و تا زمانی که Tailwind استفاده کنید شما یک شروع خوب در طراحی خود خواهید داشت.
No Naming Things (معدل فارسی شده اشیاء بدون نام یا بدون نام گذاری اشیا)
یکی از مواردی که بسیاری از افراد را کلافه میکند نامگذاری کلاس ها در سی اس اس است. سوالاتی که بسیار پیش می آیند این است که کدام کلاس ها باید خاص باشند؟ کدام کلاس ها باید عمومی تر (یا کلی ، generic) باشند؟ چگونه آنها را سازماندهی کنیم و از صحیح بودن ترتیب آنها اطمینان داشته باشیم؟ Tailwind با تهیه کلاسهایی کاربردی و مفید که می توان در 99 درصد اوقات آنها را استفاده کرد این مشکلات را برطرف می کند. تنها زمانی که نیاز می شود شما برای چیزی را نام ببرید وقتی است که یک کامپوننت را اکسترکت کنید که کاری بسیار نادر خواهد بود.
بدون نیاز به جابه جایی بین متن (فایل) (No Context Switching)
یکی از دلایلی که باعث می شود استفاده از Tailwind سریعتر باشد این است که به ندرت نیاز است که شما مجبور به تغیر متن یا زمینه (switch contexts) شوید. به دلیل اینکه فریمورک تمام چیزهایی را شما نیاز دارید فراهم می کند واقعا خیلی کم پیش می آید شما نیاز داشته باشید کد HTML خود (یا هر زبان قابلبندی دیگر) را در حین طراحی ترک کنید تا چیزی را تغییری دهید. بعبارتی نیاز نیست صدها بار بین کد HTML و CSS خود سوئیچ کنید تا بتوانید یک طراحی را به شکل درست ایجاد کنید.
برپایی سریع (Easy Onboarding)
از آنجایی که Tailwind تمام نامگذاری ها ،سازماندهی ها و... به شکل پیشفرض فراهم می کند برپاکردن و شروع یک پروژه در آن بسیار سریع و آسان است و استفاده آن بین پروژه ها بسیار هماهنگ خواهد بود. بنابراین اگر یک توسعه دهنده با Tailwind آشنایی داشته باشد (یا با آن کارکرده باشد) به شکل ساده تر و راحت تری و با مشکلات کمتری می تواند وارد یک پروژه جدید Tailwind شود.
ساختن ساده کامپوننت (Components) در Tailwind
اگر چه Tailwind خود دارای کامپوننت ها و ابزار های بسیاری است و یک فریمورک ابزاری سی اس اس است ،اما ساخت یک کامپونتت و ساخت کامپوننت از ترکیب ابزار های آن نیز به شکل ساده امکان پذیر است. در هر پروژه ای می توانید مولفه های موجود در کلاس دکمه ها و یا هر المنت دیگری را با استفاده از دستور @apply استخراج کنید. شما همچنین میتوانید از متد theme() برای قرار دادن مقادیر از فایل کانفیگ درون فایل css خود استفاده کنید و رنگ ها ،اندازه ها و... را دریافت کنید.
برای دریافت اطلاعات بیشتر در این رابطه از لینک زیر استفاده کنید:
https://tailwindcss.com/docs/extracting-components/
سرعت بالای توسعه
به دلیل اینکه شما نیاز به نامگذاری چیزی ندارید نیازی به جابه جایی زیادی بین فایلهای CSS و HTML نخواهد بود. همچنین به دلیل اینکه نیازی به کلنجار رفتن با هسته فرمورک ندارید به سادگی می توانید آن را سفارشی سازی کنید. نمونه سازی (prototyping) و ایجاد طراحی های سفارسی با Tailwind واقعا سریع است. بسیار سریع تر از فریمورک های دیگر می توان CSS های سفارشی نوشت. Tailwind تقریبا تمام ابزار های مورد نیاز برای ساخت و طراحی سایت را فراهم می کند ،بنابراین به ندرت نیاز خواهد بود تا از CSS های سفارشی سازی شده استفاده کنید. اگر ترجیح می دهید کامپوننت ها و اجزایی مثل .btn و .panel را داشته باشید ایجاد کردن آنها برای استفاده در طول پروژه کاری بسیار ساده خواهد بود.
قابلیت ریسپانسیو بودن در هرجایی
از آنجایی که تمام ابزار های Tailwindبر پایه واکنشگرا و ریسپانسیو بودن طراحی شده اند به شما این امکان را می دهند تا سایت شما در موبایل ،تبلت ،دسکتاپ و یا هر اندازه ای صفحه نمایش به شکل متفاوتی دیده شود. از همه مهمتر به کمک دو دستور @screen و @responsive می توانید کلاس هایی سفارشی و ریسپانسیو تولید کنید.
برای توضیحات بیشتر به این آدرس مراجعه کنید:
https://tailwindcss.com/docs/responsive-design/
حجم کمتر (بعداز PurgeCss)
ممکن است در ابتدا شروع با Tailwind از حجم زیاد CSS های تولید شده تعجب کنید اما موارد زیادی وجود دارند که باعث میشوند حجم فایلها به شکل چشمگیری کاهش پیدا کنند. البته شما می توانید برای دریافت اطلاعات بیشتر به آدرس زیر مراجعه کنید:
https://tailwindcss.com/docs/controlling-file-size/
اگر این مزیت ها باعث می شود تا شما نسب به امتحان کردن این فریمورک علاقمند شده باشید پیشنهاد ما این است که حتما این کار را عملی کرده و حداقل برای یکبار این فریمورک را امتحان کنید. توصیه ما به شما برای شروع به کار با این فریمورک این است که از داکیومنت رسمی آن استفاده کنید و همچنین از آدرس زیر بری از قالب بندی های نمایش (screencasts) آن را نیز بررسی کنید:
https://tailwindcss.com/screencasts/
نظر شما چیست؟ شما می توانید نظرات ،پیشنهادات و اطلاعات خود را در رابطه با این مطلب و موضوعات مربوط از طریق قسمت نظرات با ما و سایر بازدیدکنندگان در میان بگذارید.