فریمورک Tailwind CSS چیست؟

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

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

فریمورک چیست؟

اگر همین اول بخوایم مفهوم فریمورک رو به سادگی توضیح بدیم ، میشه گفت فریمورک یک بستر کدنویسی استاندارد هست که برپایه یک زبان و به منظور سهولت در کدنویسی اون زبان، طراحی می شه. برای مثال فریمورک بوت استرپ که برای سهولت در کدنویسی با زبان سی اس اس طراحی شده، چیزی جز فایل هایی با پسوند و دستورات css نیست! در حقیقت یک تیم توسعه متشکل از چند برنامه نویس حرفه ای، دستورات خاصی رو از قبل آماده کردن که طراح سایت با سرعت بیشتری پیرامون یک استاندارد مشخص، سایت خودش رو طراحی کنه.

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

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

Tailwind چیست؟

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

Tailwind چطوری کار با CSS رو متحول کرده؟

در کنار اینکه میتونیم CSS رو به صورت Pure و خالص استفاده کنیم، حول این تکنولوژی ابزار ها و فریم ورک هایی وجود داره که تمام سعیشون در اینه که استفاده از CSS  رو  برای ما راحتتر کنه. دسته بندی این ابزار ها به شکل زیر هست:

• Preprocessors (پیش پردازنده ها)

پیش پردازنده، ابزاری هست که قبل از تولید نسخه نهایی کد ، اجرا میشه و بستری متفاوت رو برای کدنویسی ارائه می کنه. دو پیش پردازنده معروف به نام های sass و less وجود داره که میتونید از هردو برای راحتی بیشتر در کدنویسی سی اس اس استفاده کنید. ماهیت ارائه پیش پردازنده اصولا بر این پایه هست که با حجم کمتری از کدها، کدهای بیشتری تولید بشه به عبارتی اگر شما چندین دستور مشابه برای یک المان دارید، با پیش پردازنده ها میتونید بخش های مشابه موجود در دستورات رو یکپارچه کنید و تعداد خط کدهای پروژه اتون رو کاهش بدی و بعد از اون کدها توسط پیش پردازنده به کدهای اصلی در زبان css کامپایل میشن. Sass و  Lessدوتا از محبوب ترین پیش پردازنده های CSS هستن که در ادامه بهشون بیشتر می پردازیم.

Less چیست؟

LESS مخفف عبارت Leaner Style Sheets هست که استایل دهی صفحات رو با  CSSساده‌تر می‌کنه. Less بسیاری از امکانات یک زبان برنامه نویسی مثل تعریف متغیر، ترکیب متغیرها و خیلی از ویژگی‌های دیگه رو برای نوشتن کدهای CSS بکار می‌بره که بتونیم با استفاده از اونها کدها رو سریع‌تر و خوانا‌تر بنویسیم. این زبان ،یک زبان اوپن سورس هست که در دسترس عموم قرار گرفته.کامپایلر LESS به زبان جاوااسکریپت نوشته شده و کدهای نوشته شده ارو به فرمت استاندارد CSS تبدیل میکنه. LESS یک زبان سمت کاربره که با استفاده از مرورگرهای فایرفاکس ،گوگل کروم ،سافاری و … در سمت سرور توسط Node.js و Rhino قابل اجراست و ازش استفاده میشه.

ویژگی ها و مزایا Less

• قابلیت پشتیبانی از تمامی مرورگرها

• نوشته شده در جاوااسکریپت که موجب سرعت بالای پردازش نسبت به CSS میشه

• نگارش کدهای CSS مشابه با زبان برنامه نویسی PHP

• بهبود یافته CSS و استفاده بهینه از CSS3

• قابلیت پیاده سازی در هر دو سمت کاربر و سرور

• خوانایی بالای کدهای تو در تو

مفهوم Sass در طراحی سایت چیست؟

sass مخفف Syntactically Awesome Stylesheets هست . خروجی کدهای sass نهایتا فایل های css و همون دستورات css هستن. مرورگرها نمیتونن دستورات sass رو بخونن و اجرا کنن و لازم هست تا توسط یک کامپایلر این دستورات به کدهای سی اس اس تبدیل بشن.

هدف اصلی استفاده از sass کاهش میزان کدنویسی و انعطاف در کنترل پروژه هست . به عنوان یک مثال تصور کنید که فایل استایل شما 20.000 خط کد داشته باشه ، اگر این دستورات رو به شکل مستقیم نگارش نکنید و از روش sass استفاده کنید ، شاید کدهای شما در داخل فایل sass به 5000 خط کد کاهش پیدا کنه. درسته که نهایتا خروجی این 5000 خط در آخر به همون 20.000 خط کد سی اس اس تبدیلا میشه، اما هرزمان که نیاز به تغییر یا افزودن و کاستن کد بود ، شما با 5000 خط کد داخل فایل sass سروکار دارید نه با 20.000 خط کد داخل فایل سی اس اس !

ویژگی ها و مزایا Sass                                                   

• کاملا سازگار با CSS
• استفاده از متغیرها و بلاک‌های تو در تو و MIXINها
• بسیاری از توابع مفید برای دستکاری رنگ و مقادیر دیگر
• ویژگی‌های پیشرفته مانند دستورالعمل‌های کنترل برای کتابخانه‌ها
• خروجی قابل تنظیم با فرمت قابل تنظیم

• Components (کامپوننت ها)

این دسته از ابزار ها رویکردی که دنبال میکنن به این شکل هستش که عده ایی برنامه نویس با CSS یک کلاسی (Class) رو تعریف کردن مثلا دکمه (Button) و تمام استایل های لازم برای یک دکمه ارو تو اون کلاس پیدا کردن و به برنامه نویس ها میگن که اگر شما در پروژه اتون از دکمه میخواید استفاده کنید به کد های HTML اتون این کلاس رو اضافه کنید تا تموم استایل های لازم برای یک دکمه روی سایتتون اعمال بشه.

فریم ورک Bootstarp (بوت استرپ) چیست؟

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

 سایر اطلاعات مربوط به BootStrap رو در مقاله‌ی فرانت اند چیست؟ در بخش فریم ورک ها آورده شده.

Foundation

Foundation CSS یک فریمورک قدرتمند و همه کاره Front-End هست که فرآیند ساخت وب‌سایت‌های ریسپانسیو و جذاب رو ساده می‌کنه. سیستم شبکه ریسپانسیو، مجموعه گسترده ای از کامپوننت های UI، ویژگی های دسترسی و تکنیک های بهینه سازی اون رو به ابزاری ارزشمند برای توسعه دهندگان و طراحان وب تبدیل کرده. با استفاده از قابلیت‌های Foundation CSS، دولوپر ها می‌تونن در زمان صرفه‌جویی کنن.

Bulma

این فریم ورک ساز و کارش درست شبیه بقیه فریم ورک های CSS  هست فقط یسری ویژگی هایی داره که باعث میشه نسبت به بقیه فریم ورک  ها تمایزاتی داشته باشه.

1. یکی از ویژگی های bulma این هست که به هیچ کد جاوااسکریپت یا فریمورک جاواسکریپتی نیاز نداره ، از یک جهت این ویژگی یک مزیت محسوب می‌شه و اون هم اینه که کاربر آزاده  تا هر فریم‌ورک جاوااسکریپتی رو انتخاب کنه (یا اصلا اینکار رو انجام نده).
2. ویژگی دوم و مهم این فریم‌ ورک این هست که سیستم ستون‌بندی (Grid) اون برپایه flex ساخته شده. یعنی برخلاف فریم‌ورک‌های کمی قدیمی تر که از روش float برای ایجاد ستون‌بندی در HTML استفاده می‌کنن، بولما از روش جدیدتر flex استفاده می‌کنه

فریمورک bulma نسبت به bootstrap حجم و تعداد خطوط کمتری داره و در نهایت باعث افزایش چشم گیر سرعت لود شدن سایت هم میشه.

• Unitilities

ابزار های این دسته از فریم ورک ها رویکرد دیگه ایی دنبال میکنن که خیلی سعی شده سطح پایین تر یا به اصطلاح Low Level  تر به این قضیه بپردازن، به این معنی که مثلا شما وقتی که از بوت استرپ استفاده میکنید یک کلاس  براشون می نویسید و بعد داخلش هر ویژگی بخواید رو مقدارش رو مشخص می کنید و وقتی اون کلاس رو به یک المانی تعمیم می دیدید تمام اون ویژگی های اون کلاس روش اعمال میشه ولی Utility ها تلاششون اینه که بجای اینکه ما CSS بنویسیم و کار های روتین و تکراری انجام بدیم تعداد زیادی کلاس در اختیار ما قرار میدن که هر کدوم فقط یک ویژگی رو ارائه میده به طور مثال اگر میخواید قسمتی از یک متن رو بولد کنید بجای اینکه بیاید کد CSS اش رو بنویسید یک کلاس به ما میده که فقط فونت بولد رو در بر داره و ما دیگه نیازی به نوشتن خود CSS رو تا حد زیادی دیگه نداریم و فقط از همون کلاس استفاده میکنیم.

تو این حوضه هم ابزار ها زیادی وجود دارن که شاخص ترینش tailwind css هست که همین رویکرد رو دنبال میکنه و در کنارش Tachyons و Windi css هم وجود دارن.

مقایسه BootStrap و Tailwind CSS

یک مثالی رو در این رابطه ببینیم:

فرض کنید در وبسایت میخوایم یک دکمه داشته باشیم اگر بخوایم از کامپوننت بیسد فریمورک ها استفاده بکنیم به طور مثال بوت استرپ یک کلاس رو برای این کار فراخوانی میکنیم و کلاس هایی که خود بوت استرپ به ما معرفی کرده اون هارو روی اون المان اعمال میکنیم و رندر میشه ولی اگر بخوایم از رویکرد Utility استفاده کنیم چیزی مثل تیل ویند بجای استفاده از یک کلاس خاص که ویژگی های کلی مشخصی داره انواع CSS کلاس هارو داریم که هر کدوم از اونها در واقع هر ویژگی اون المان رو به طور کاملا جدا مقدارشو معین کردن.

در نگاه اول ممکنه که بوت استرپ ساده تر و راحتتر بنظر بیاد در نگاه دوم هم همینطوره ولی نکته ایی که وجود داره اینه که این رویکرد بشدت دست مارو برای طراحی وبسایت و شخصی سازی اون باز میکنه. شاید خیلی شنیده باشید که همه سایت ها شبیه هم شدن به این علت که همشون دارن از یک CSS کامپوننت بیسد فریم ورکی دارن استفاده میکنن و عموما هم سراغ شخصی سازی و کاستوم کردنش نمیرن ولی با tailwind css میتونیم هر دیزاینی که تو ذهنمون هست رو پیاده سازی بکنیم

مزایا tailwind CSS

•  کنترل کامل بر دیزاین

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

•  توسعه سریع تر

از سریع ترین فریمورک های موجود است؛ شما می‌توانید با استفاده از ابزار های پیش‌فرض tailwind کلاس های مناسب را برای هناصر html بنویسید و به سرعت استایل مورد نظر خود را پیاده‌سازی کنید.

• دیزاین responsive

با ابزار های پیش‌فرض tailwind می‌توانید با استفاده از کلید هایی مانند lg، md، sm در پشت هر کلاس به راحتی آن را به ابعاد صفحه‌ای خاص نسبت دهید.

نکته: لازم به ذکر هست یادگیری tailwind هرگز به فردی که با css آشنا نیست پیشنهاد نمی‌شه. چون هر کلاس در این فریمورک ارتباط نزدیکی با یک یا چند پراپرتی css داره همچنین حتی برای توسعه دهندگان حرفه‌ای هم یادگیری و عادت به تموم کلاس ها و ابزار tailwind می‌تونه زمان‌بر باشه.

اگر اطلاعات کافی رو در این زمینه ندارید در مقاله‌ی فرانت اند چیست؟ میتونید با مفاهیم این حوضه بیشتر آشنا بشید. بنابراین نیاز هست قبل از شروع یادگیری tailwind، به css کاملا مسلط باشید. 

چرا TailWind؟

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