توضیحات

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 تخفیف

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

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

  • سلام استاد
    برای اینکه ریپازتوری هایی که از گیت هاب دانلود میکنم رو باز کنم لازم دارم که pnpm باز کنم
    ولی بخاطر شرایط نت این کارو نمیتونم انجام بدم و اصلا وقتی کامند npm install -g pnpm رو میزنم نصبش نمیکنه
    پیکجی راهی از سایت های داخلی هستش که بتونم این کارو انجام بدم ؟
    همینطور shadcn-ui نصب نمیشه
    اگه گروهی چیزی هست که به این سوالات پاسخ بده ممنون میشم راهنمایی کنید
    در کل ممنون بابت زحماتی که میکشید خیلی ارزشمنده برای من

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

      npm install --registry="https://mirror-npm.runflare.com" pakage-name

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

    • سلام وقت بخیر.
      اینو تست کنید.

      npm install --registry="https://mirror-npm.runflare.com" pakage-name

    • استاد باتوجه به mirror که دادید: کار نمیکنه باز هم:

      
      
      npm error code E404
      npm error 404 Not Found - GET https://mirror-npm.runflare.com/pakage-name
      npm error 404
      npm error 404 The requested resource 'pakage-name@*' could not be found or you do not have permission to access it.
      npm error 404
      npm error 404 Note that you can also install from a
      npm error 404 tarball, folder, http url, or git url.
      npm error A complete log of this run can be found in: C:\Users\tahas\AppData\Local\npm-cache\_logs\2026-04-10T13_56_32_838Z-debug-0.log

    • باید بجای package-name اسم پکیج های که گذاشته میشه در دوره قرار بدید برای نصب مثله همون npm install هست که توی دوره گفته شده فقط regester-- اضافه شده

    • اقا شیخ بنده میخواستم ببینم ایا امکان دانلود offline documt فریم ورک bootstrap هستش که به document دسترسی داشته باشیم و مطالب رو هم بتونیم خودمون بخونیم؟

    • سلام وقت بخیر.
      با این ایمیل و اکانت هیچ دوره تا کنون خریداری نکردید. احتمالا با یک ایمیل دیگری بودید.

    • سلام وقت بخیر.
      توی سایت های مختلف میتونید دنبالش باشید با سرچ و اگه قالبی طرحش مناسب هست استفاده و تغییرات مورد نیازتون رو بدید.

  • سلام ، ببخشید این دوره رو ببینم یا بوت استرپ؟ چون تا جایی که میدونم هردو یه کار رو میکنن ولی من میخام اونیو یاد بگیرم که کامل تر و کاربردی تره♥️

    • سلام وقت بخیر.
      پیشنهاد من اینکه با هر دوتا آشنا باشید و خالی از لطف نیست که با بوت استرپ آشنا باشید چرا که اونم محبوب هست و ممکنه قالبی با بوت استرپ باشه و نیاز به آشنایی باهاش داشته باشید.

  • الان دوره رو تموم کردم، عالی بود. مفید و کاربردی.
    من چند ساله که همه دوره های مورد نیازم رو از سایت شما دیدم و مشغول به کار هستم. ممنون از زحماتتون. انشاالله هرکجا هستین حال دل خودتونم عالی باشه ؛)

    • سلام وقت بخیر.
      از لطف و بازخورد ارزشمند شما سپاسگزاریم 🙏
      خوشحالیم که دوره براتون مفید بوده و در مسیر کاری‌تون تأثیرگذار بوده.
      براتون آرزوی موفقیت‌های بیشتر داریم.

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

  • سلام استاد.
    از شما تشکر میکنم بابت دوره tailwnd و باز تولید اون ,
    بنده جلو جلو رفتم و از پروژه نهایی بازدید کردم 🙏
    https://webprog-projects-js.ir/

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

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

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

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

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

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

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

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

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

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