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
آشنایی با مبحث typography
responsive design
آشنایی با مباحث sizing, spacing, borders
آشنایی با مباحث background, effects, filter
آشنایی با مباحث transition, transform, animation
آشنایی و کار با حالت dark mode و استفاده در پروژه
پروژه پایانی دوره
پیش نیازهای این دوره :
برای ارسال نظر ابتدا باید وارد سایت شوید
سلام استاد این روزا تیلویند خیلی محبوب شده و زیاد مورد استفاده قرار میگیره اما من میخوام اون رو از سایت شما یاد بگیرم ولی الان ورژن 4 اومده و خیلی فرق کرده نسبت به ورژن های قبل .
بنده میخواهم این دوره را خریداری کنم ایا این دوره بازتولید میشه ؟
و بنده اگه این رو خریداری بکنم به بازتولید اون هم دسترسی دارم ؟
سلام وقت بخیر.
بله دوره بازتولید میشه و در همین دوره قرار میگیره
سلام وقتتون بخیر بی زحمت ورژن ۴ هم اضافه می کنید و ترجیحا یک پروژه جدید هم زده بشه ممنون
سلام وقت بخیر.
بله، قراره دوره کامل باز تولید بشه و پروژه جدید داشته باشه
سلام استاد وقت به خیر
الان دوره ها بر اساس ورژن 4 اپدیت شده است یا قراره باز تولید بشه؟
سلام وقت بخیر.
خیر بر اساس ورژن ۳ هست. یا همین دوره بازتولید میشه و یا اصلا دوره ای جدیدی قرار میگیره
درود وقت بخیر
تیلویند ورژن 4 آمده ، قصد باز تولید این دورره دارید ؟
تغییراتش خیلی زیاد هست
سلام وقت بخیر.
تغیرات هنوز کامل بررسی نشده و توی نصب متفاوت شده اگه بخش upgrade را توی داکیومنت مطالعه کنید.
اگه تغیرات زیاد باشه دوره کامل بازتولید میشه و اگه کم باشه ویدیو هاش آپدیت میشه
با سلام و احترام.
قصد خرید چند دوره را دارم ولی میخواستم بپرسم آیا برای شب یلدا، جشنواره یا تخفیفی برای دوره ها قرار میدین؟
سلام وقت بخیر.
عذرخواهی میکنم فقط درصد تخفیفی که روی دوره هست را داریم.
سلام استاد خسته نباشید دوره هاتون عالیه ممنون
خیلی دوست دارم این دوره رو هم ببینم ولی خب یکم قیمتش زیاده تخفیف نمیدین ؟
سلام وقت بخیر.
ممنون از شما، عذرخواهی میکنم فقط درصد تخفیفی که روی دوره ها هست را داریم.
سلام استاد من میخواهم دوره را تهیه کنم اما من دوره نسخه 3 رو مخواهم دوره نسخه 3 را کی ارزه میکنید
سلام وقت بخیر.
در مورد ورژن 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 هست.
با سلام درود به استاد عزیز.
ببخشید شما برای چند روز آینده تخفیف نوروزی روی دوره ها اعمال میکنید؟
سلام وقت بخیر.
بله، احتمالش هست ولی هنوز قطعی نیست
سلام
خسته نباشید
برای استفاده از npx ارور میده میشه لطفا راهنمایی کنید
از npm که استفاده میکنم مشکلی نداره
سلام وقت بخیر.
چک کنید که مراحل را بدرستی رفته باشید و متن ارور چیه؟
سلام
آیا از Tailwind و Flowbit میشه در وردپرس هم استفاده کرد؟ مثلا قالب یا افزونه ای بنویسیم که فرانت با Tailwind پیاده شده باشه؟
سلام وقت بخیر.
من با وردپرس آشنایی ندارم اما بصورت کلی بله، چرا که شما خروجی فایل css را دارید و میتوانید جاهای مختلف ازش استفاده کنید.
آقای فلاح میگن تیلویند نیازی به sass نداره ! چرا ؟
سلام وقت بخیر.
دوست عزیزی که میفرمایید را نمیشناسم اما، شما در ابتدا باید با تیلویند آشنا بشید. پس ویدیو معرفی دوره و قسمت های ابتدای دوره که بصورت رایگان هست را مشاهده کنید.
سلام خسته نباشید من با خرید این پروژه میتونم تو ری اکت تم مرکزی داشته باشم و از اون بین دارک و لایت سوییچ کنم ؟
سلام وقت بخیر.
والا هدفتون برای خرید دوره یه مقدار عجیب هست. تیلویند فریمورک 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
استاد میخواستم وارنیگ که داره میده رو غیر فعال کنم برا همین افزونه های سی اس اس درست کار نمیکنن گفتم شاید بشه اضافش کنی چون یک جا دیدم اضافشون میکنن و مشکل حل میشه
@tailwind
هم همین مشکل رو داره
با توجه به سوال قبل
سلام وقت بخیر.
سرچ کنید ببینید روندش به چه صورت هست.
سلام استاد من تو css از @layer استفاده کردم
ولی داره vs code اختار میده میخواستم این مشکل حل کنم و @layer
به vc code اضافه کنم چی کار کنم
سلام وقت بخیر.
میتونید اکستنشن tailwind را نصب و تست کنید، ارور توی ادیتور مهم نیست چون نمیتونه تشخیص بده و مهم ارور توی خروجی هست.
Danial Jamshidi
سلام استاد.
از شما تشکر میکنم بابت دوره tailwnd و باز تولید اون ,
بنده جلو جلو رفتم و از پروژه نهایی بازدید کردم 🙏
https://webprog-projects-js.ir/
علی شیخ
4 روز پیش
سلام وقت بخیر.
خیلی هم عالی😂😂
انشاا... آخر هفته ویدیوهاش توی سایت و توی همین دوره قراره میگیره و توی یک دوره جدید که نیاز به خرید اون باشه نیست و دوستانی که قبلا این دوره را تهیه کردند به محتوای باز تولید شده جدید دسترسی دارند.