توضیحات

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

وضعیت دوره : کامل شده
قیمت دوره : 699,000 524,000 تومان
% 25 تخفیف

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

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

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

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

    • سلام وقت بخیر.
      خیلی هم عالی😂😂
      انشاا... آخر هفته ویدیوهاش توی سایت و توی همین دوره قراره میگیره و توی یک دوره جدید که نیاز به خرید اون باشه نیست و دوستانی که قبلا این دوره را تهیه کردند به محتوای باز تولید شده جدید دسترسی دارند.

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

    • سلام وقت بخیر.
      بله دوره بازتولید میشه و در همین دوره قرار میگیره

    • سلام وقت بخیر.
      خیر بر اساس ورژن ۳ هست. یا همین دوره بازتولید میشه و یا اصلا دوره ای جدیدی قرار میگیره

    • سلام وقت بخیر.
      تغیرات هنوز کامل بررسی نشده و توی نصب متفاوت شده اگه بخش upgrade را توی داکیومنت مطالعه کنید.
      اگه تغیرات زیاد باشه دوره کامل بازتولید میشه و اگه کم باشه ویدیو هاش آپدیت میشه

  • با سلام و احترام.
    قصد خرید چند دوره را دارم ولی میخواستم بپرسم آیا برای شب یلدا، جشنواره یا تخفیفی برای دوره ها قرار میدین؟

    • سلام وقت بخیر.
      عذرخواهی میکنم فقط درصد تخفیفی که روی دوره هست را داریم.

    • سلام وقت بخیر.
      ممنون از شما، عذرخواهی میکنم فقط درصد تخفیفی که روی دوره ها هست را داریم.

    • سلام وقت بخیر.
      در مورد ورژن 3 هم صحبت شده، توی توضیحات دوره هم نوشتیم که اونجا مطالعه کنید.

  • عرض سلام و سپاس از تدریس بسیار عالی شما
    یک سوال:
    زمانیکه قابلیت purge را در تیلویند فعال می کنیم و می خواهیم یکی از کلاسهای تیلویند را با کدهای جاوااسکریپت به تگ مورد نظر اعمال کنیم با توجه به اینکه این کلاس در فایل html نیست و بعدا توسط جاوااسکریپت به کدهای html ما اضافه می شود در نتیجه این کلاس به فایل css مقصد کامپایل نمی شود و در نتیجه روی تگ مورد نظر اعمال نمی شود. راه حل چیست؟

    • سلام وقت بخیر.
      ببینید شما میتونید کلاس مورد نظر با apply@ هم ایجاد و استفاده کنید که گفته شده همچنین ممکنه کلاس های که قصد اضافه شدن باشه توی بخش های دیگه پروژه هم استفاده شده باشه

  • سلام ببخشید کنار tailwind به نظر شما از چه کتابخانه یا framework برای انعطاف و باز بودن دستمون استفاده کنیم منظورم اینه که یک مدت قبلا از jquery برای بعضی کارها استاده میشد الان به نظرتون روی jquery - alphine js یا کدوم کتابخانه یا framework کمکی در کنار tailwind وقت بزاریم که هر قالب وب سایتی رو بتونیم طراحی کنیم ؟
    و یک سوال مهم دیگه این که alphine js برای وب سایت های بزرگ و حجیم مناسب هست ؟علت توصیه شما برای انتخاب alphine js چی هستش ؟استفاده از vue به جای alphine کار عاقلانه ای هستش؟ ممنون میشم راهنمایی کنید.

    • سلام وقت بخیر.
      از alpine.js استفاده کنید. بخاطر سادگی استفاده ازش و قابلیت هاش
      کاربرد فریمورک vue و alpine متفاوت از هم هستند. Vue مناسب پروژه های spa هست.

  • سلام
    آیا از Tailwind و Flowbit میشه در وردپرس هم استفاده کرد؟ مثلا قالب یا افزونه ای بنویسیم که فرانت با Tailwind پیاده شده باشه؟

    • سلام وقت بخیر.
      من با وردپرس آشنایی ندارم اما بصورت کلی بله، چرا که شما خروجی فایل css را دارید و میتوانید جاهای مختلف ازش استفاده کنید.

    • سلام وقت بخیر.
      دوست عزیزی که میفرمایید را نمیشناسم اما، شما در ابتدا باید با تیلویند آشنا بشید. پس ویدیو معرفی دوره و قسمت های ابتدای دوره که بصورت رایگان هست را مشاهده کنید.

    • سلام وقت بخیر.
      والا هدفتون برای خرید دوره یه مقدار عجیب هست. تیلویند فریمورک css هست و اگه قرار باهاش آشنا بشید و توی پروژه استفاده کنید این دوره کمکتون میکنه
      اما فقط بحث dark مود هست که اونم میشه با css زد. بستگی به فریمورک css پروژه شما داره و ...
      والا چه تفاوتی داره که بخش js پروژه با چه فریمورک یا کتابخانه و یا حتی جاوااسکریپت خام باشه، تمام این بخش ها جدا از هم هستند.

  • سلام استاد ارجمند . وقت عالی بخیر یک سوال داشتم : برای ایجاد پروژه ی ری اکت می توان اول تیلویند و sass را با npm نصب کرد و سپس ری اکت رو ؟

    • سلام وقت بخیر.
      ببینید اول شما باید درک کنید که اینها چی هستند و برای چه کاری استفاده میشوند.
      تیلویند ماله css هست ری اکت ماله js و sass که دیگه اگه قراره از تیلویند استفاده بشه، نیازی بهش نیست.
      به هرحال فرقی نداره کدوم اول باشه، سوال یه مقدار عجیب بود. شاید من متوجه منظور شما نشدم

    • مثلا من یک پروژه ی تیلویند ایجاد کردم حالا می خوام برای داینامیک کردن پروژه از ری اکت استفاده کنم می تونم رو همین پروژه با npm ری اکت رو تصب کنم ؟

    • شما اول پروژه ری اکت را حالا با create-react-app یا vite میسازید و بعد بقیه موارد را اضافه میکنید.

  • سلام استاد من از اول اموزشا رو شروع کردم و واقعا عالی بود دسته شما درد نکنه
    اخر همین پروژه تلوین من سعی کردم هدر سایت رو ثابت کنم و با sticky کردن پوزیشن و z-5 خوده هدر و بعدش دیو های داخلش سعی کردم اینکارو کنم ولی متاسفانه جواب ندادن اگه امکانش هست کمکم کنید

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      ببینید اگه میخواهید کلا توی اسکرول هدر ثابت باشه باید از پوزیشن fixed استفاده کنید. طبق داکیومنت کافیه کلاس های fixed top-0 left-0 right-0 را به تگ header بدید و از طرفی یه بک گراند سفید هم به این تگ باید بدیم bg-white چرا که بک گراند شفاف هست و در نهایت کلاس z-50 که روی تمام تگ ها قرار بگیره
      در کل به تگ header باید کلاس های fixed top-0 left-0 right-0 bg-white z-50 بدید و همچنین اگه خواستید section اول فاصله بیشتر نسبت به هدر داشته باشه کافیه کلاس mt-16 را بهش بدید.

  • آقای شیخ سلام .
    tailwind نحوه استفادش توی ری اکت فرقی با حالت عادی نداره ؟
    منظورم مثل bootstrap که یه چیز دیگه به اسم react-bootstrap داره و برای ری اکت باید اون رو استفاده کرد.

    • سلام وقت بخیر.
      خیر تفاوتی نداره، react-bootstrap یک فریمورک جداگانه هست و به این معنی نیست که نشه bootstrap را توی ری اکت استفاده کرد. بوت استرپ و تیلویند فریمورک css هستند و ری اکت برای js