آموزش Tailwind CSS (همراه با React) - راهنمای جامع برای مبتدیان - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• پروژه ما Our project

• تیل ویند؟ Tailwind ?

مبانی تیل ویند Tailwind basics

• ابزارهای تیل ویند Tailwind utilities

• ویژگی نمایش The display property

• فلکس و گریدها Flex and grids

• واکنشگرا Responsive

• حالت‌ها States

• گروه‌ها و همتا Groups and peer

• سفارشی‌سازی تم Theme customization

• دستورالعمل‌ها Directives

• حالت تاریک Dark mode

راه‌اندازی Setup

• گیت‌هاب Github

• راه‌اندازی React و Tailwind Setup React and Tailwind

• راه‌اندازی prettier و svg Setup prettier and svg

بیایید تیل ویند را تمرین کنیم Let's practice Tailwind

• هدر Header

• نویگیشن موبایل Mobile nav

• منوی موبایل واکنشگرا Responsive mobile menu

• طرح‌بندی جزئیات کفش Shoe detail layout

• گرادیان و فونت‌ها Gradient and fonts

• واکنشگرا کردن گرادیان Making the gradient responsive

• انتخاب Select

• انیمیشن‌ها Animations

• کارت Card

• نکته کوچک: ساخت کلاس‌های Tailwind به‌صورت پویا Little gotcha : Contruct Tailwind classes dynamically

• گرید کارت Card grid

• سایدبار متحرک Animated sidebar

• آیتم سبد خرید Cart item

• ورودی‌های آیتم سبد خرید Cart item inputs

• ادغام تیل ویند (tw-merge) Tailwind merge (tw-merge)

• لیست سبد خرید Cart list

• راه‌اندازی حالت تاریک Dark mode setup

• استایل‌دهی حالت تاریک Dark mode styling

پویا کردن سبد خرید با React Making the cart dynamic with React

• انتخاب یک کفش Selecting a shoe

• اضافه به سبد خرید Add to cart

• حذف از سبد خرید Remove from cart

استقرار روی شبکه جهانی وب! Deploy on the World Wide Web !

• استقرار با Vercel Deploying with Vercel

• تبریک! Congratulations !