Tailwind CSS 4 آموزش ضروری - آخرین آپدیت

مقدمه Introduction

• درک رویکرد اول ابزار Understanding the utility-first approach

• با CSS Tailwind ملاقات کنید Meet Tailwind CSS

• آنچه باید بدانید What you should know

• استفاده از Codespaces برای این دوره Using Codespaces for this course

1. تایپوگرافی و رنگ ها 1. Typography and Colors

• با استفاده از رنگ ها Using colors

• راه حل: سبک یک کارت توصیف Solution: Style a testimonial card

• چالش: سبک یک کارت توصیف Challenge: Style a testimonial card

• استفاده از رنگ های پس زمینه و شیب Applying background colors and gradients

• درک پیش از پرواز Understanding preflight

• استفاده از سبک های متن و فونت Applying text and font styles

• اضافه کردن مرزها و سایه ها Adding borders and shadows

ترتیب اصول طرح بندی 2. Layout Fundamentals

• راه حل: یک بخش صفحه رویداد را سبک کنید Solution: Style an event page section

• ایجاد طرح بندی Flexbox Creating flexbox layouts

• چالش: یک بخش صفحه رویداد را سبک کنید Challenge: Style an event page section

• ایجاد طرح های شبکه Creating grid layouts

• اندازه و تنظیم مجدد موارد شبکه Sizing and reordering grid items

• اضافه کردن حاشیه و بالشتک Adding margins and padding

• تنظیم عرض و ارتفاع Setting width and height

• اندازه وسایل انعطاف پذیر و لانه سازی Sizing flex items and nesting

• با استفاده از برنامه های نمایش ، موقعیت و Z-Index Using display, position, and z-index utilities

3. طراحی وب پاسخگو 3. Responsive Web Design

• درک رویکرد اول موبایل Understanding the mobile-first approach

• ایجاد طرح های پاسخگو مشترک Building common responsive layouts

• با استفاده از اصلاح کننده های پاسخگو Using responsive modifiers

• راه حل: کارت اطلاعات با تصویر Solution: Info card with image

• چالش: کارت اطلاعات با تصویر Challenge: Info card with image

4. تعامل و انواع 4. Interactivity and Variants

• عناصر سبک در شناور و تمرکز Style elements on hover and focus

• چالش: یک دکمه تعاملی درست کنید Challenge: Make an interactive button

• تحول ، انتقال و انیمیشن ها Transforms, transitions, and animations

• اضافه کردن حالت تاریک Adding dark mode

• با استفاده از اصلاح کننده های شبه کلاس Using pseudo-class modifiers

• راه حل: یک دکمه تعاملی درست کنید Solution: Make an interactive button

• استایل عناصر شبه Styling pseudo-elements

5. سبک های سفارشی در Tailwind 5. Custom Styles in Tailwind

• استخراج سبک های مشترک Extracting common styles

• با استفاده از مقادیر دلخواه Using arbitrary values

• ایجاد ابزارهای سفارشی Creating custom utilities

• تغییر موضوع Changing the theme

پایان Conclusion

• چه بعدی؟ What next?

• تنظیم محیط خود Setting up your environment