آموزش تیلویند(Tailwind CSS) پروژه محور

توضیحات تدریس

Tailwind CSS یک (utility-first) فریمورک CSS است که ابزارها و class ‌های پر استفاده CSS را در اختیار شما قرار می‌دهد.Tailwind CSS فاقد هر گونه قالب پیش‌فرض است و در آن هیچ کامپوننت داخلی برای رابط کاربری وجود ندارد. Tailwind را می‌تواند یک فریمورک CSS برای ساخت رابط‌های کاربری سفارشی دانست. یعنی اگر دنبال فریمورکی هستید که یکسری ویجت و کامپوننت از پیش طراحی شده را در خود داشته باشد، Tailwind انتخاب مناسبی برای شما نخواهد بود. اما اگر قصد ساخت یک رابط کاربری پیچیده و البته سفارشی را دارید Tailwind CSS می‌تواند به خوبی به شما کمک بکند. از آنجایی که در این ابزار خبری از کامپوننت‌های آماده به شکل کامپوننت‌های بوت‌استرپ و یا دیگر فریمورک ها وجود ندارد بنابراین دو وبسایت طراحی شده با استفاده از این فریمورک الزاما شبیه همدیگر نخواهند بود. دقت کنید که Tailwind یک فریمورک css هست و داخلش هیچ کد جاوااسکریتی وجود نداره و برای بخش های که نیاز به جاوااسکریپت داره مثله dropdown یا اسلایدر و ... باید خودتون کد جااواسکریپت بزنید که پیشنهاد ما فریمورک alpine.js هست که دوره اش توی وبسایت قرار گرفته و توی پروژه نهایی از alpine.js استفاده میکنیم.tailwind بشدت قدرت شخصی سازی داره و هدف این دوره آموزش این موارد هست و شما باید حتما با css به خوبی آشنا باشید. مباحثی که در این دوره گفته میشود شامل : آشنایی با tailwindcss tailwindcss چیست تفاوت tailwind با دیگر فریمورک ها نصب tailwind با npm postcss چیست نصب tailwind با npx افزودن tailwind با CDN purge (حذف استایل های اضافی) responsive توضیح resonsive سفارش سازی breakpoint ها ()responsive, screen@ کامپوننت container variants hover, group-hover focus, group-focus active, focus-within motion-safe, motion-reduce disable, checked child variants@ colors, spacing colors spacing base style افزودن base style افزودن base style با plugin components ایجاد component ایجاد components با plugin utilities ایجاد utilities ایجاد utilities با plugin just-in-time just-in-time چیست variants مقادیر دلخواه dark mode media class