telegram

توضیحات

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 برای نمونه بصورت رایگان قرار داده شده

دوستان دقت کنید، در حال حاضر ورژن 3 تیلویند منتشر شده و این دوره بر اساس ورژن 2 ضبط و تهییه شده، به همین دلیل قسمت های که در ورژن 3 تغییر کرده در این دوره ویرایش شده و در انتهای آن قسمت ها در مورد تغییرات توی ورژن 3 صحبت شده

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

مدرس دوره علی شیخ
مدت دوره 10:38:10
تعداد ویدیو 53
وضعیت دوره : کامل شده
قیمت دوره : 399,000 379,000 تومان
% 5 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
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 ساس

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

دوره های آموزشی
آموزش نکست جی اس (next.js)
کامل شده
% 10 تخفیف

آموزش نکست جی اس (next.js)

نکست جی اس، فریمورک Next.js یکی از فریمورک های کتابخانه React برای production است به این معنی که، برای تمام آنچه که به ع...

599,000 539,000 تومان
24:41:33
آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)
کامل شده
% 15 تخفیف

آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)

بعد از دوره آموزش نکست (next.js) که مورد استقبال شما دوستان عزیز قرار گرفت.حالا وقت آن رسیده که در قالب یک پروژه کاربردی...

799,000 679,000 تومان
36:41:55
آموزش بوت استرپ 5 (Bootstrap) در دنیای واقعی
کامل شده
% 10 تخفیف

آموزش بوت استرپ 5 (Bootstrap) در دنیای واقعی

بعد از مشاهده دوره Bootstrap ۵ نیاز هست که شما دوستان عزیز ‌Bootstrap ۵ را در دنیای واقعی مشاهده کنید. به این معنی که شم...

399,000 359,000 تومان
08:43:02
آموزش ویو ایکس (vuex) و pinia.js (پینیا جی اس) پروژه محور
کامل شده
% 20 تخفیف

آموزش ویو ایکس (vuex) و pinia.js (پینیا جی اس) پروژه محور

Vuex یک کتابخانه مدیریت وضعیت است که مخصوص ایجاد اپلیکیشن‌های متوسط، پیچیده و بزرگ در Vue.js است. Vue.js یکی از فریم ور...

299,000 239,000 تومان
05:16:05

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

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

  • javaad

    استاد سلام خسته نباشید و ممنون از دوره خوبتون
    ممنون یشم بنده رو راهنمایی کنید
    من یه پروژه فرانت با تیل ویند انجام دادم و برای کسی که میخواد بکند سایتو با لاراول بزنه فرستادم ولی پروزه بعضی جاهاش رو سیستمش نمیاد
    ممنون میشم یه توضیح مختصر بدید و اینکه چجوری سورس رو براش ارسال کنم

    • علی شیخ

      3 سال پیش

      سلام وقت بخیر.
      یعنی چی روی سیستمش نمیاد!!!
      شما فایل css نهایی که ایجاد شده و توی html اضافه میکنید را براش بفرستید.

  • Hadi Hasanpur

    سلام آقای شیخ...در قسمت پروژه بخش سوم Dark Mode چرا بعد از تموم شدن کد نویسی دکمه های دارک مود اصلا نمایش داده نمی شه در حالی در بخش دوم هستند. ز کدهای تمرینی هم استفاده کردم همون مشک هست ممنون می شم راهنمایی مختصری بفرمایید

    • علی شیخ

      3 سال پیش

      سلام وقت بخیر.
      جلوتر در موردش صحبت شده، تا قسمت آخر مشاهده کنید.

  • fatemehora

    سلام و وقت بخیر، ضمن تشکر از زحمات شما، اگر ما بخواهیم از فریمورک VueJS و Nuxt به عنوان کتابخانه های جاوا اسکریپتی استفاده کنیم آیا نیاز است که از alpine.js هم استفاده شود؟ آیا برای Tailwind هم Tailwind CSS component library مشابه bootstrapVue وجود دارد؟

    ممنون

    • علی شیخ

      3 سال پیش

      سلام وقت بخیر.
      این فریمورک css هست اون js و خب دوتا موضوع جدا هستند و توی هر پروژه ای و هر کجا که خواستید میتوانید از اینا استفاده کنید حالا با هم یا بدون هم
      برای سوال دومتون هم کافیه یه سرچ کوچیک بزنید

    • علی شیخ

      3 سال پیش

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

  • omidmofid

    سلام
    هنگام کامپایل کدها فقط base کامپایل میشه 469 خط کد تولید میکنه.ضمنا اخطار زیر را هنگام کامپایل میده: 

    warn - The `content` option in your Tailwind CSS configuration is missing or empty.

    warn - Configure your content sources or your generated CSS will be missing styles.

    warn - https://tailwindcss.com/docs/content-configuration

    • علی شیخ

      3 سال پیش

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

  • ahad molaei

    سلام استاد خسته نباشید
    امکانش هست راهنمایی کنید که تیلویند رو چگونه به وردپرس متصل کنیم خیلی جاها رو گذشتم و تست کردم جواب نداده اگر راهنمایی کنید ممنون می شوم

  • Omid Bahadori

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

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

    • علی شیخ

      3 سال پیش

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

    • Shayan Rezaei

      3 سال پیش

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

    • علی شیخ

      3 سال پیش

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

    • علی شیخ

      4 سال پیش

      دوست عزیز،برای کل دوره ها که تخفیف گذاشتیم تا اخر شهریور، الان سه ماه پش سرهم تخفیف روی کل دوره ها گذاشتیم?

  • reza96a

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

    • علی شیخ

      4 سال پیش

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

    • علی شیخ

      4 سال پیش

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