آموزش tailwindcss

یکی از بزرگ‌ترین مشکلات استفاده از CSS خام زمان‌بر بودن بهره‌گیری از آن است. درست است که ما می‌توانیم همه چیز را به دقیق‌ترین روش ممکن پیاده‌سازی کنیم اما اگر عجله داشته باشیم و بخواهیم که در مدت زمان سریع‌تری ویژگی‌های مورد نظرمان را پیاده‌سازی کنیم چه؟ در این صورت شما به یک فریمورک نیاز دارید. اما آیا هر فریمورکی می‌تواند کارایی لازم را برای شما داشته باشد؟ خیر! فریمورک‌هایی که به ما در استفاده کردن از CSS کمک می‌کنند بسیار زیاد بوده و هر کدام با مزایا و معایبی دست و پنجه نرم می‌کنند. یکی از بزرگ‌ترین عیب‌های بیشتر فریمورک‌ها سریع نبودن‌شان در امر پیاده‌سازی‌ست. برای حل این مشکل ما باید با تک تک این فریمورک‌ها کار کنیم و در نهایت پس از گذراندن چند ماه متوجه شویم که کدام مورد از کدام مورد دیگر بهتر است! خب این مسئله زمان‌بر و حوصله سربری است. اما از آنجا که خوشبختانه وبسایت آموزشی راکت حضور دارد ما می‌توانیم به شما این راهنمایی لازم را بدهیم. به صورت ساده اگر بخواهم بگویم: سریع‌ترین و دقیق‌ترین فریمورکی که با آن می‌توانید لایه‌بندی المان‌های وبسایت‌تان را با آن پیاده‌سازی کنید Tailwind CSS است. فریمورکی تازه کار اما با ویژگی‌های بسیار جذاب.

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

Tailwind CSS چیست؟

Tailwind CSS یک فریمورک مبتنی بر ایده utility-first است که در مدت کوتاهی توانسته طرفداران بسیار زیادی را پیدا کرده و محبوبیت بالایی را کسب کند. دادن قابلیت توسعه سریع به افراد برای طراحی و توسعه رابط کاربری یکی از دلایل بالا رفتن این میزان محبوبیت شده است.

Tailwind یک فریمورک CSS است که برای اولین بار در سال ۲۰۱۹ منتشر شد. در حال حاضر (سال ۲۰۲۱) نسخه ۲.۲ این فریمورک منتشر شده و بنابر آماری که خود Tailwind CSS ارائه می‌دهد بیش از ۲۶۰ هزار توسعه‌دهنده از این فریمورک استفاده می‌کنند. رسیدن به چنین نقطه‌ای در کمتر از دو سال بسیار امر مهم و قابل توجهی‌ست. یکی از دلایل اصلی این امر ویژگی‌های زیادی است که فریمورک ارائه کرده و آن را برای پروژه‌های مختلف ایده‌آل ساخته است.

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

۱- کنترل روی استایل‌دهی به المان‌ها

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

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

۲- پروسه استایل‌دهی سریع‌تر

زمانیکه بحث به استایل‌دهی به المان‌های HTML می‌رسد هیچ فریمورکی نمی‌تواند به سرعت Tailwind این کار را برای شما انجام دهد. نتیجه این موضوع خروجی گرفتن سریع شما از المان‌های HTML می‌شود. Tailwind از صدها استایل‌دهی آماده داخلی استفاده می‌کند که تمام کار شما اعمال کردن آن‌ها روی خاصیت class برای المان‌های HTML است.

۳. رسپانسیو بودن و امنیت بالا در زمان اجرا

تمام المان‌ها و استایل‌های مربوط به Tailwind بصورت رسپانسیو شده به شما ارائه می‌شود به همین دلیل این فریمورک از میزان رسپانسیو و Mobile-First بودن بالایی برخوردار است.

از نظر امنیت نیز باید بگویم که Tailwind نسبت به رقبا در زمان اجرا، از مشکلات کمتری برخوردار بوده و استایل‌های عجیب و غریب اعمال نخواهد شد.

۴. ویژگی‌های اضافی

Tailwind بعنوان فریمورکی به حساب می‌آید که در بخش فرانت-اند وبسایت‌ها اجرا می‌شود. به همین دلیل توسعه‌دهندگان باید انتظارات حداکثری از این فریمورک داشته باشند. Tailwind نیز این انتظارات را به جای خواهد آورد چرا که توسعه‌دهندگان این فریمورک با دیگر فریمورک‌های قبل از خود کار کرده و می‌دانند که چه مشکلاتی را برای توسعه‌دهندگان ایجاد می‌کردند و حال آن‌ها را رفع نموده‌اند. شما در Tailwind می‌توانید با استفاده از PurgeCSS کلاس‌هایی که در پروژه خود مورد استفاده قرار نداده‌اید را به سادگی حذف کرده و بار وبسایت‌تان را کم دهید.

نقاط ضعف Tailwind CSS

۱. فقدان کامپوننت‌های مهم

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

۲. مستندسازی

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

پیش‌نیازهای یادگیری این دوره آموزشی چیست؟

برای اینکه بتوانید بیشترین استفاده را از این دوره ببرید نیاز است که با HTML و CSS به خوبی آشنایی داشته باشید. خوشبختانه شما می‌توانید از طریق دو دوره آموزشی راکت «دوره آموزشی HTML» و «دوره آموزشی CSS» در این دو مورد استاد شوید.

در این دوره آموزشی چه چیزهایی را یاد خواهید گرفت؟

• آشنایی اولیه با فریمورک Tailwind CSS
• بررسی امکانات، مزایا، معایب و پیش‌نیازهای آن
• پیاده‌سازی و نصب در محیط سیستم‌عامل
• گرفتن خروجی از آن در قدم‌های اول
• آشنایی با فایل‌های مربوط به پیکربندی و بهینه‌سازی
• آشنایی با تایپوگرافی
• شخصی سازی کلاس ها
• استفاده از flexbox
• اضافه کردن autocomplete به vscode
• آشنایی با کلاس های responsive
• آشنایی با variant ها
• و ده‌ها مورد مربوطه دیگر

اگر در رابطه با این دوره آموزشی سوالاتی را در ذهن دارید پیش از مطرح کردن‌شان نگاهی به سوالات متدوال زیر بیاندازید. در صورتی که پاسخ واضحی پیدا نکردید در قسمت نظرات آن را با ما به اشتراک بگذارید تا بتوانیم بهتر به شما پاسخ دهیم.