توضیحات

Tailwind CSS یک (utility-first) فریمورک CSS است که ابزارها و class ‌های پر استفاده CSS را در اختیار شما قرار می‌دهد.Tailwind CSS فاقد هر گونه قالب پیش‌فرض است و در آن هیچ کامپوننت داخلی برای رابط کاربری وجود ندارد. Tailwind را می‌تواند یک فریمورک CSS برای ساخت رابط‌های کاربری سفارشی دانست. یعنی اگر دنبال فریمورکی هستید که یکسری ویجت و کامپوننت از پیش طراحی شده را در خود داشته باشد، Tailwind انتخاب مناسبی برای شما نخواهد بود. اما اگر قصد ساخت یک رابط کاربری پیچیده و البته سفارشی را دارید Tailwind CSS می‌تواند به خوبی به شما کمک بکند. از آنجایی که در این ابزار خبری از کامپوننت‌های آماده به شکل کامپوننت‌های بوت‌استرپ و یا دیگر فریمورک ها وجود ندارد بنابراین دو وبسایت طراحی شده با استفاده از این فریمورک الزاما شبیه همدیگر نخواهند بود. دقت کنید که Tailwind یک فریمورک css هست و داخلش هیچ کد جاوااسکریتی وجود نداره و برای بخش های که نیاز به جاوااسکریپت داره مثله dropdown یا اسلایدر و ... باید خودتون کد جااواسکریپت بزنید که پیشنهاد ما فریمورک alpine.js هست که دوره اش توی وبسایت قرار گرفته و توی پروژه نهایی از alpine.js استفاده میکنیم.tailwind بشدت قدرت شخصی سازی داره و هدف این دوره آموزش این موارد هست و شما باید حتما با css به خوبی آشنا باشید.در ویدیو معرفی به این مورد اشاره کرده ایم، پس حتما ویدیو معرفی دوره را مشاهده کنید.

برای آشنایی بیشتر با tailwindcss و همچنین مشاهده پروژه ای که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.

قسمت های 1, 2, 3, 4, 5, 6 و 7 برای نمونه بصورت رایگان قرار داده شده

مباحثی که در این دوره گفته میشود شامل :
آشنایی با 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

پروژه نهایی

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


HTML CSS طراحی وب FlexBox grid Sass tailwindcss تیلویند

مدرس دوره علی شیخ
مدت دوره 09:32:07
تعداد ویدیو 52

وضعیت دوره : درحال برگزاری
قیمت دوره : 129,000 تومان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • با سلام خدمت شما به نظرتون برای طراحی سایت بوت استرپ را تریجیح میدهید یا این دوره ؟ و اینکه این دوره پروژه محور هست یا خیر؟

    • سلام وقت بخیر.
      بستگی به پروژه و مهارت شما داره، لطفا ویدیو معرفی را ببینید درموردش و پروژه صحبت شده

    • سلام وقت بخیر‌.
      گفته شده، توی ویدیو معرفی اگه پروژه نهایی را ببینید، فونت فارسی قرار داده شده