آموزش Tailwind CSS با پروژه

آنچه یاد خواهید گرفت:

• چگونه از کلاس‌های Tailwind CSS استفاده کنیم؟
• ایجاد طراحی‌های زیبا
• کاهش حجم باندل‌ها
• چگونه Tailwind را سفارشی کنیم؟
• استفاده از Tailwind در ویژوال استودیو کد
• ایجاد کامپوننت‌های رایج
• Tailwind css 3.0
• استقرار آن در Netlify
• Alpine
• نصب vite JS

پیش‌نیازهای دوره

• درک اولیه از HTML و CSS

توضیحات دوره

Tailwind CSS، فریمورک utility–first برای ساخت سریع طراحی‌های سفارشی است. این آموزش شما را از صفر با Tailwind آشنا خواهد کرد.

در طول دوره، به بررسی ویژگی‌های Tailwind CSS خواهیم پرداخت. به‌عنوان یک مرور سریع، Tailwind یک فریمورک utility-first است که به‌منظور تسریع فرآیند طراحی، نیاز به CSS سفارشی را به‌طور کامل از بین می‌برد.

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

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

Tailwind با پیش‌فرض‌های حساسی طراحی شده تا طراحی‌های شما به شکل پالیش شده و طراحی‌ شده با استفاده‌ دقیق از پالت رنگ‌ها، سایه‌های رنگی، ثبات اندازه‌گیری و بهترین شیوه‌های مدرن وب به نظر برسند. همچنین باید اشاره کرد که Tailwind فریمورک mobile–first است و دارای کنوانسیون نامگذاری آسان با طراحی‌های واکنش‌گرای داخلی است.

آیا به سفارشی‌سازی نیاز دارید؟

سیستم سفارشی‌سازی قدرتمند Tailwind به شما امکان می‌دهد که هر چیزی را در این فریمورک با استفاده از فایل tailwind.config.js سفارشی کرده، tweak کرده و اصلاح کنید.

آنچه یاد خواهید گرفت:

• همه انواع کلاس‌های یوتیلیتی
• چگونه کلاس‌های یوتیلیتی را به‌درستی در پروژه‌ خود استفاده کنیم؟
• چگونه یوتیلیتی‌های موجود Tailwind را سفارشی کنیم؟
• چگونه کلاس‌های یوتیلیتی جدید به پروژه‌ خود اضافه کنیم؟
• طرح‌بندی‌های Tailwind
• طراحی وب واکنش‌گرا
• و خیلی موارد دیگر

این دوره برای چه کسانی مناسب است؟

• کسی که می‌خواهد روش‌های مدرن استایل‌دهی به محتوای وب را با استفاده از مدرن‌ترین ابزار یاد بگیرد.