سلام
خسته نباشید
برای استفاده از npx ارور میده میشه لطفا راهنمایی کنید
از npm که استفاده میکنم مشکلی نداره
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
responsive
variants
colors, spacing
base style
components
utilities
just-in-time
dark mode
پروژه نهایی
پیش نیازهای این دوره :
برای ارسال نظر ابتدا باید وارد سایت شوید
سلام
خسته نباشید
برای استفاده از 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 را نصب و تست کنید، ارور توی ادیتور مهم نیست چون نمیتونه تشخیص بده و مهم ارور توی خروجی هست.
سلام استاد من داشتم با تلوین کار میکردم یک دفعه ارور داد و دیگه کار نکرد نمیدونم کجاش مشکل داره میشه کمک کنید
اینم متنش
CssSyntaxError: tailwindcss: C:\Users\mohammad\Desktop\tailwin\src\input.css:3:1: The `hover:` class does not exist. If `hover:` is a custom class, make sure it is defined within a `@layer` directive.
1 | @tailwind base;
2 | @tailwind components;
> 3 | @tailwind utilities; سلام وقت بخیر.
متن ارور نوشته که کلاستون باید توی layer@ نوشته بشه، قسمت مربوطه را یکبار دیگر مشاهده کنید.
استاد من نسخه سه tailwind نصب کردن برام سرعتش داره مشکل ایجاد میکنه میخواستم اگه بشه Purge رو غیر فعال کنم اخر کار که کد تموم شد فعالش کنم این دستور برای
purge: {
enabled: true,
content: ['./src/**/*.html'],
},
برای نسخه دو هست برای نسخه سه از چه دستوری استفاده کنم ؟
سلام وقت بخیر.
والا شما مشکلی دارید که بقیه بخاطرش خوشحال هستن!!
فک نکنم توی ورژن ۳ امکان غیرفعال کردنش باشه
سلام استاد من سه بار بخش نصبش دیدم انجام دادم ولی نصب نمیشه مشکل از چیه
نمیشد یکم بهتر اموزش بدید واقعا گیج شدیم
سلام وقت بخیر.
ارور چی دریافت میکنید!!!
بازم تاکید میکنم پیش نیاز دوره بشدت مهم هست و این دوره برای دوستان مبتدی نیست.
استاد سلام خسته نباشید و ممنون از دوره خوبتون
ممنون یشم بنده رو راهنمایی کنید
من یه پروژه فرانت با تیل ویند انجام دادم و برای کسی که میخواد بکند سایتو با لاراول بزنه فرستادم ولی پروزه بعضی جاهاش رو سیستمش نمیاد
ممنون میشم یه توضیح مختصر بدید و اینکه چجوری سورس رو براش ارسال کنم
سلام وقت بخیر.
یعنی چی روی سیستمش نمیاد!!!
شما فایل css نهایی که ایجاد شده و توی html اضافه میکنید را براش بفرستید.
سلام آقای شیخ...در قسمت پروژه بخش سوم Dark Mode چرا بعد از تموم شدن کد نویسی دکمه های دارک مود اصلا نمایش داده نمی شه در حالی در بخش دوم هستند. ز کدهای تمرینی هم استفاده کردم همون مشک هست ممنون می شم راهنمایی مختصری بفرمایید
سلام وقت بخیر.
جلوتر در موردش صحبت شده، تا قسمت آخر مشاهده کنید.
سلام و وقت بخیر، ضمن تشکر از زحمات شما، اگر ما بخواهیم از فریمورک VueJS و Nuxt به عنوان کتابخانه های جاوا اسکریپتی استفاده کنیم آیا نیاز است که از alpine.js هم استفاده شود؟ آیا برای Tailwind هم Tailwind CSS component library مشابه bootstrapVue وجود دارد؟
ممنون
سلام وقت بخیر.
این فریمورک css هست اون js و خب دوتا موضوع جدا هستند و توی هر پروژه ای و هر کجا که خواستید میتوانید از اینا استفاده کنید حالا با هم یا بدون هم
برای سوال دومتون هم کافیه یه سرچ کوچیک بزنید
با سلام یه سوال داشتم
آیا این امکان هست که هم breakpoint رو custom کنیم و هم عرض container رو برای هر breakpoint به صورت custom شده در بیاریم؟
سلام وقت بخیر.
بله، توی تیلویند شما قابلیت شخصی سازی زیادی دارید.
سلام
هنگام کامپایل کدها فقط 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 سلام وقت بخیر.
شما در دوره شرکت نکردید، لطف کنید برای حمایت از ما، از خوده سایت دوره ها را تهیه کنید.
سلام استاد خسته نباشید
امکانش هست راهنمایی کنید که تیلویند رو چگونه به وردپرس متصل کنیم خیلی جاها رو گذشتم و تست کردم جواب نداده اگر راهنمایی کنید ممنون می شوم
سلام وقت بخیر.
من با وردپرس کار نکردم و نمیدونم ?
سلام استاد خیلی ممنون بابت به روز ررسانی دوره
سلام وقت بخیر.
خواهش میکنم
Mahdi Abdolkarimi
با سلام درود به استاد عزیز.
ببخشید شما برای چند روز آینده تخفیف نوروزی روی دوره ها اعمال میکنید؟
علی شیخ
1 ماه پیش
سلام وقت بخیر.
بله، احتمالش هست ولی هنوز قطعی نیست