تجربه من از کار با Tailwindcss

طی چند وقت اخیر پروژه ای تعریف شد که روی NextJS و Tailwindcss بالا آوردیمش. برای همین مجبور شدم یک مدت تمرکزم رو از روی مطالعه انگولار بردارم و روی این پروژه متمرکز بشم. در این مقاله میخوام تجربه م رو از کار با Tailwindcss باهاتون به اشتراک بگذارم.

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

برای مطالعه این framework میتونید به سایتش مراجعه کنید

https://tailwindcss.com/docs

مزایا و معایب استفاده از Tailwindcss

به نظرم تنها عیبش اینه که HTML رو شلوغ میکنه. ولی مزیت هاش انقدر زیاده که در سیستم امروزی توسعه front با وجود کامپوننت های کوچک و کم حجم ایراد حساب نمیشه.

برای رفع این عیب، پروژه ای ساخته شده بنام daisyUI که founder ش یک ایرانیه. این پروژه بر روی Tailwind تعریف شده. اگر daisyUI رو به اپ اضافه کنین، خیلی از کلاس هایی که به صورت یکجا و با هم نیاز داریم در قالب یک کلاس تعریف شده اند. (مثلا button ها ، tab ها و ... ) بعلاوه اینکه همچنان میشه کنارش از امکانات Tailwind استفاده کرد.
لینک زیر رو ببینید:
https://react.daisyui.com/?path=/docs/welcome--docs

مهمترین مزیت Tailwindcss که به چشم من اومد، اینه که سرعت تعریف رول های CSS رو بالا میبره. امروزه بیشتر IDE ها از نوشتن کدهای HTML با روش های سریع پشتیبانی میکنند. در واقع با نوشتن پشت سر هم دستور زیر

و فشاردادن دکمه enter، یک المنت کامل ساخته میشه

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

مزیت مهم دیگه ش به نظر من اینه که یک زبان مشترک بین برنامه نویس ها حساب میشه و learning curve کمتری نسبت به یک UIKit اختصاصی داره که شما برای پروژه یا پروژه هاتون با دیگران به اشتراک بگذارید.

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

آخرین مزیتش رو بخوام بگم، همه تغییرات به داخل layout ها محدود میشه. تغییرات داخل layout رو به هر نحوی که بخوایم میتونیم پیاده سازی کنیم. و همچنین شاهد کمترین حجم CSS لازم برای کد هستیم.

ساختن یک پروژه به همراه Tailwindcss

اول یک پروژه خالی میسازیم

برای اینکه Tailwind رو به پروژه اضافه کنیم، اول باید پکیجش رو نصب کنیم.

مرحله سوم ساختن فایل تنظیمات Tailwindcss است. با اجرای دستور زیر:

فایلی بنام tailwind.config.js داخل پروژه ساخته میشه.

در این فایل میتونید انواع تنظیمات مورد نیازتون رو وارد کنید. فعلا، داخل فایل تنظیم در بخش content ، تنظیمی رو اضافه کنین که فایل های حاوی CSS های Tailwindcss رو شامل بشه: