تسلط بر Tailwind CSS UI/UX با 18 نمونه پروژه 2024

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

مقدمه Introduction

• مقدمه Introduction

• مزیت Tailwind CSS Advantage of Tailwind CSS

• محیط توسعه باد دم Tailwind Development Environment

• نصب CLI CLI Installation

• ورودی Tailwind - خروجی CSS Tailwind Input - Output CSS

• مقدمه ای بر HTML Emmet Introduction to HTML Emmet

• فایل های پروژه Project Files

تایپوگرافی Typography

• اندازه فونت Font Size

• خانواده فونت Font Family

• سبک و دکوراسیون Style and Decoration

• خطوط، رنگ و سبک Lines, Color and Style

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

• حاشیه، طرح کلی، حلقه Border, Outline, Ring

• پیکربندی تم Theme Config

بالشتک، حاشیه، خطوط Padding, Margins, Lines

• خط، بالشتک، حاشیه 1 Line, Padding, Margins 1

• خط، بالشتک، حاشیه 2 Line, Padding, Margins 2

• لبه گرد Rounded Edge

• ویژگی های End Logic را شروع کنید Start End Logic Properties

اندازه، تعامل، تایپوگرافی بیشتر Sizing, Interactivity, more Typography

• اندازه - عرض و ارتفاع Sizing - Width & Height

• اندازه - عرض و ارتفاع 2 Sizing - Width& Height 2

• نقاط شکست Breakpoints

• تعامل Interactivity

• سایه Shadow

• دستورالعمل CSS سفارشی Custom CSS Directive

• بیشتر در مورد تایپوگرافی More on Typography

• اطلاعات بیشتر در مورد تایپوگرافی 2 More on Typography 2

پس زمینه و تصاویر Background and Images

• پس زمینه و گرادیان Background & Gradient

• تصویر پس زمینه و موقعیت یابی Background Image & Positioning

• پیوست تصویر Image Attachement

• تناسب و موقعیت شی Object Fit & Position

• تعیین موقعیت عنصر Element Positioning

طرح بندی Layout

• ظرف Container

• ستون ها Columns

• طرح بندی فلکس 01 Flex Layout 01

• طرح بندی فلکس 02 Flex Layout 02

• طرح بندی شبکه ای 01 Grid Layout 01

• طرح بندی شبکه ای 01 Grid Layout 01

• طرح بندی شبکه ای 02 Grid Layout 02

انتقال، تحول و انیمیشن Transition, Transformation and Animation

• فیلترها Filters

• فیلترهای پس زمینه Backdrop Filters

• تبدیل عنصر Element Transformation

• انتقال ها Transitions

• انیمیشن ها Animations

• انیمیشن سفارشی 01 Custom Animation 01

• انیمیشن سفارشی 02 - پیشرفته Custom Animation 02 - Advanced

فرم ها Forms

• کار با فرم ها Working With Forms

ویژگی های پیشرفته Advanced Features

• توابع استاتیک پلاگین Plugin Static Functions

• تابع تم Utilities را اضافه کنید Add Utilities Theme Function

• عملکرد پویا پلاگین Plugin Dynamic Function

• پلاگین های خارجی External Plugins

• پلاگین های خارجی - رسمی External Pluggins- Official

• افزونه خارجی - Flowbite External Plugin - Flowbite

پروژه های 01 - طراحی اجزا Projects 01 - Components Designs

• مقدمه Introduction

• دکمه ها Buttons

• آواتارها Avatars

• نشان ها Badges

• کارت 01 Card 01

• کارت 02 Card 02

• کارت 03 Card 03

• منو Menu

• نوار منوی عمودی Vertical Menu Bar

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

• منوی کشویی Dropdown Menu

• پاورقی Footer

• آکاردئون Accordion

• معین Modal

• لیست قیمت Price List

• فرم ورود Login Form

پروژه 02 - وب سایت Project 02 - Website

• منوی بالا - وب سایت های Salespecks Top Menu - Salespecks Websites

• بنر برتر - وب سایت Salespecks Top Banner - Salespecks Website

• Top Grid Card - وب سایت Salespecks Top Grid Card - Salespecks Website

• بخش فناوری - وب سایت Salespecks Technology Section - Salespecks Website

• محصولات و خدمات - وب سایت Salespecks Products & Services - Salespecks Website

• بخش گواهینامه - وب سایت Salespecks Testimonial Section - Salespecks Website

• بخش پاورقی - وب سایت Salespecks Footer Section - Salespecks Website

پروژه 03- رابط کاربری چت Project 03- Chat UI

• فهرست مخاطبین - رابط کاربری چت Contact List - Chat UI

• اتاق چت - رابط کاربری چت Chat Room - Chat UI