آموزش پروژه محور Tailwind CSS❤️آموزش تیلویند css

این روزها tailwind css به عنوان یکی از جدیدترین و محبوب ترین فریم ورک های css برای بخش فرانت سایت مورد استفاده قرار می گیرد و استفاده از آن مزیت های بسیاری دارد که در ادامه به صورت کامل در مورد ویژگی ها و آموزش tailwind css بحث خواهیم کرد. بعد از مطالعه این صفحه و گذراندن دوره tailwind css شما می تونید با سرعت بیشتری پروژه های خودتون رو انجام دهید.

آموزش Tailwind CSS

هر روز که میگذره تکنولوژی های جدیدتری وارد بازار برنامه نویسان و توسعه دهندگان وب می شود و هر کسی زودتر خودش را آپدیت کند و با شرایط جدید وفق دهد برنده این بازی است. همین چندسال پیش بود که باید همیشه از صفرتاصد یک وبسایت رو با css ,html خالی می نوشتیم اما کمی بعد بوت استرپ وارد دنیای طراحی سایت شد و کارهای بسیاری از طراحان سایت را راحت تر کرد اما الان شاهد Tailwind css هستیم که مشابه بوت استرپ اما بسیار بهتر ظاهر شده و امروزه کمتر کسی است که این فریم ورک را نشناسد.

Tailwind CSS چیست ؟

تیلویند Css یک فریم ورک سی اس اسی است که به شما این امکان را می دهد تا با استفاده از یکسری کلاس های مشخص بیاید درون فایل html طراحی های خودتون رو انجام دهید در واقع شعار تیلویند این است که بدون خارج شدن از فایل html وبسایت خودتون رو فقط با نوشتن یکسری کلاس ها طراحی کنید و نیازی نباشه برید خودتون بشینید از صفر کدهای تکراری css رو بنویسید.

فرق TailwindCSS با Bootstrap چیست؟

مهم ترین تفاوت بین Tailwind css و bootstrap این هست که بوت استرپ یکسری قالب و کامپوننت های آماده پیش فرض دارد که ما باید از آنها استفاده کنیم اما در tailwind css اینگونه نیست و شما با استفاده از یکسری کلاس نویسی ساده داخل تگ های html می تونید طرح های مختلفی طراحی کنید و دستتون برای طراحی بازتر هست همچنین در نهایت کدهای تیلویند نسبت به بوت استرپ بسیار کم حجم تر است که این موضوع برای افزایش سرعت سایت بسیار بهینه تر است.

کدام نسخه tailwind css در دوره آموزش داده می شود؟

تا امروز آخرین نسخه tailwind css 3.X هست عدد 3 که مشخصه میشه آخرین تغییرات بزرگ و حرف X به معنی ریزآپدیت هایی است که در نسخه اصلی و  بزرگ رخ می دهد حالا شاید براتون سوال باشه این دوره با کدوم نسخه های تیلویند به شما عزیزان آموزش داده خواهد شد؟ پاسخ به این سوال این است که چون هنوز آموزش Tailwind css ضبط نشده است ورژن دقیق مشخص نیست اما قطعاً با آخرین نسخه موجود برای شما تدریس می شود و بعد از آن هر آپدیت بزرگی که از تیلویند سی اس اس منتشر شود به صورت رایگان در این دوره اضافه خواهد شد.

سرفصل های دوره آموزش TailWindCSS :

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

• بررسی سایت Tailwindcss
• نصب Tailwindcss
• توضیح resonsive
• سفارش سازی breakpoint ها
• ()responsive, screen@
• کامپوننت container
• توضیحات variants ها
• توضیحات colors
• توضیحات spacing
• ایجاد component
• Layouts
• Flex and Grid
• sizing
• Typography
• Borders
• Transitions and Animation
• نکات مورد نیاز تیلویند سی اس اس

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

نمونه مثالی از TailWindCss

همانطور که در بالا اشاره شد ما برای استفاده از tailwindcss میایم و یکسری کلاس های از قبل مشخص شده رو در قسمت کلاس تگ های html اضافه می کنیم و طبق نیازهای خودمون پیش می رویم برای مثال به نمونه کد زیر دقت کنید.

pr-0 = padding-right: 0px
rounded = border-radius: 0.25rem
bg-transparent = background-color: transparent
هر کدام از کدهای بالا سمت چپ مساوی کدهایی است که در تیلویند سی اس اس استفاده می شود که معنی هر کدام در سمت راست مساوی مشخص شده است یعنی pr-0 یعنی اینکه فاصله داخلی از سمت راست 0 باشه و شما کافیه همین عبارت رو در کلاس المانی قرار دهید که می خواهید فاصله داخلی آن از سمت راست حذف شود.