telegram

توضیحات

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

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

مباحثی که در این دوره گفته میشود شامل :
آشنایی با tailwindcss

  • آشنایی با tailwindcss
  • تفاوت tailwind با دیگر فریمورک ها
  • نصب و نحوه استفاده از tailwindcss
  • شخصی سازی (theme config)
  • آشنایی با variants
  • ایجاد component و utility class

آشنایی با مبحث typography

  • کار با font
  • پالت رنگی
  • افزودن فونت دلخواه

responsive design

  • توضیح resonsive
  • سفارش سازی breakpoint ها
  • کامپوننت container

آشنایی با مباحث sizing, spacing, borders

آشنایی با مباحث background, effects, filter

آشنایی با مباحث transition, transform, animation

آشنایی و کار با حالت dark mode و استفاده در پروژه

پروژه پایانی دوره

 

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

HTML CSS طراحی وب FlexBox grid Sass tailwindcss تیلویند سی اس اس اچ تی ام ال سی اس اس گرید tailwindcss_v4 تیلویند_سی اس اس تیلویند_سی اس اس_ورژن_4

مدرس دوره علی شیخ
مدت دوره 20:14:30
تعداد ویدیو 100
وضعیت دوره : کامل شده
قیمت دوره : 999,000 599,000 تومان
% 40 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

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

دوره های آموزشی
آموزش رایگان sass (ساس) پروژه محور
کامل شده

آموزش رایگان sass (ساس) پروژه محور

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

رایگان
04:46:01
آموزش Node.js
کامل شده

آموزش Node.js

Node.js یک محیط سمت سرور برای اجرای کدهای JavaScript است، در واقع به کمک Node.js، زبان برنامه نویسی جاوااسکریپ به جای اج...

رایگان
03:23:18
آموزش Composer
کامل شده
% 20 تخفیف

آموزش Composer

کامپوزر ابزاری برای مدیریت وابستگی(dependency management) در پروژه‌های PHP است. ابزار فوق به شما این امکان را می‌دهد که...

349,000 279,000 تومان
01:49:44
آموزش ساخت وب سرویس با لاراول (Laravel Rest Api) پروژه محور
کامل شده
% 40 تخفیف

آموزش ساخت وب سرویس با لاراول (Laravel Rest Api) پروژه محور

APIها (مخفف Application Programming Interface) رابط‌هایی نرم‌افزاری هستند که نرم افزارها و سخت افزارها با کمک آن می توان...

799,000 479,000 تومان
10:16:14

کامنت های ارزشمند شما:

برای ارسال کامنت ابتدا باید وارد سایت شوید

  • Omid Bahadori

    سلام استاد خسته نباشید و ممنون از دوره ی خوبتون
    من وقتی با npm نصب میکنم خروجی کد هام 424 خط هست ولی با npx نصب میکنم باید بجای 

     npx tailwindcss -i ./src/... -o ./dist/... -w
    از ``` npx tailwindcss-cli build -i ./src/... -o ./dist/... -w ``` استفاده کنم تا خروجی کدهام کامل باشه ، درسته کامل هست ولی چون از پکیج های دیگه استفاده میکنم باید npm باشه
    راهی وجود نداره که با npm نصب کنم؟
    ممنون میشم راهنمایی کنید

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      در مورد نصب با npm توضیح داده شده و جلوتر در مورد اینکه فقط کلاس های که استفاده شده، خروجی گرفته بشه تا حجم کمتری داشته باشه هم صحبت میشه

    • Shayan Rezaei

      5 سال پیش

      سلام ورژن 3 که تازه اومده تغییراتش با این دوره زیاده و باید آپدیت بشه یا زیاد تفاوتی نکرده؟

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      خیر، موتور just-in-time که بصورت پیش نمایش بوده توی این ورژن استفاده شده. درمورد just-in-time توی بخش مربوطه توضیح دادیم.

    • علی شیخ

      5 سال پیش

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

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      مشخص نیست، چون در حال ضبط هست. حدودا بیش از ۵۰ قسمت میشه و روزانه توی سایت قرار میگیره

    • علی شیخ

      5 سال پیش

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