آموزش Tailwind CSS از ابتدا | با پروژه های متعدد

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

معرفی Introduction

• Tailwind CSS چیست؟ What is Tailwind CSS?

• راه اندازی محیط توسعه Development Environment Setup

• میانبرهای صفحه کلید VS Code VS Code Keyboard Shortcuts

• اولین برنامه Tailwind First Tailwind APP

• Tailwind CSS نصب و راه اندازی Tailwind CSS Installation and set up

بررسی اجمالی پروژه Project Overview

• بررسی اجمالی پروژه یک Project One Overview

• بررسی اجمالی پروژه دو Project Two Overview

مفاهیم اصلی Core Concepts

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

• پلاگین ها و تنظیمات پیکربندی Plugins and configuration settings

• کنترل شناور، فوکوس و سایر حالت ها Handling Hover, Focus, and Other States

• طراحی ریسپانسیو با Tailwind CSS Responsive design with Tailwind CSS

• حالت روشن و تاریک Light & Dark Mode

• سفارشی سازی Tailwind Tailwind Customizations

• ارزش های دلخواه Arbitrary Values

• Tailwind @apply Tailwind @apply

• Tailwind @layers Tailwind @layers

بخش بنیادی Fundamental Section

• رنگ های دم بادی Tailwind Colors

• فاصله باد دم Tailwind Spacing

• تایپوگرافی باد دم Tailwind Typography

• اندازه باد دم Tailwind Sizing

• پس زمینه های باد دم Tailwind Backgrounds

• شیب باد دم Tailwind Gradient

• مرزهای دم باد Tailwind Borders

• جلوه های باد دم Tailwind Effects

• Tailwind Flexbox & Grid Tailwind Flexbox & Grid

• کانتینر باد دم Tailwind Container

• اجزای باد دم Tailwind Components

• Tailwind Build Tailwind Build

• منابع Tailwind Tailwind Resources

ساخت پروژه کامل با Tailwind CSS Building complete project with Tailwind CSS

• ساخت پروژه کامل با Tailwind CSS Building complete project with Tailwind CSS

ساخت پروژه سفارشی با Tailwind CSS Building Custom project with Tailwind CSS

• منطقه قهرمان برتر Top Hero Area

• ناحیه سرصفحه Header Area

• حالت روشن و حالت تاریک Light Mood and Dark Mode

• منوی اصلی Main Menu

• منطقه قهرمان Hero Area

• محل خدمات Service Area

• منطقه برند Brand Area

• منطقه پروژه Project Area

• منطقه تماس Contact Area

• منطقه پاورقی Footer Area

• ساخت پروژه Build The Project

• میزبانی پروژه Hosting the project

امتحان Quiz

• امتحان Quiz

نکات و ترفندها Tips and Tricks

• اشتباهات رایجی که هنگام استفاده از TailwindCSS باید از آنها اجتناب کرد Common mistakes to avoid when using TailwindCSS

نتیجه Conclusion

• مراحل بعدی و منابع برای ادامه یادگیری Next steps and resources for continued learning