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
base style
- افزودن base style
- افزودن base style با plugin
components
- ایجاد component
- ایجاد components با plugin
utilities
- ایجاد utilities
- ایجاد utilities با plugin
just-in-time
- just-in-time چیست
- variants
- مقادیر دلخواه
dark mode
پروژه نهایی
پیش نیازهای این دوره :
hamed gorji
با سلام یه سوال داشتم
آیا این امکان هست که هم breakpoint رو custom کنیم و هم عرض container رو برای هر breakpoint به صورت custom شده در بیاریم؟
علی شیخ
3 سال پیش
سلام وقت بخیر.
بله، توی تیلویند شما قابلیت شخصی سازی زیادی دارید.