آموزش Tailwind CSS - روشی جدید برای> فکر کردن <CSS

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

معرفی Introduction

• مطالب درسی شما برای 3 بخش دوره بعدی (PDF) Your Course Material for the next 3 course sections (PDF)

معرفی Introduction

• مطالب درسی شما برای 3 بخش دوره بعدی (PDF) Your Course Material for the next 3 course sections (PDF)

راه اندازی نرم افزار Software Setup

• نصب SourceTree (اختیاری) SourceTree Installation (Optional)

راه اندازی نرم افزار Software Setup

• کد ویژوال استودیو + افزونه ها Visual Studio Code + Extensions

• کد ویژوال استودیو + افزونه ها Visual Studio Code + Extensions

• نصب Node.js Node.js installation

• نصب Node.js Node.js installation

• نصب Git (اختیاری) Git Installation (Optional)

• نصب Git (اختیاری) Git Installation (Optional)

• نصب SourceTree (اختیاری) SourceTree Installation (Optional)

نصب و مهارت های پایه Installation & Basic Skills

• زمینه: امت Background: Emmet

نصب و مهارت های پایه Installation & Basic Skills

• Tailwindcss را در 5 مرحله نصب کنید Install Tailwindcss in 5 steps

• Tailwindcss را در 5 مرحله نصب کنید Install Tailwindcss in 5 steps

• توجه - به روز رسانی - مهم است ATTENTION - UPDATE - IMPORTANT

• توجه - به روز رسانی - مهم است ATTENTION - UPDATE - IMPORTANT

• سبک ها و گردش کار را راه اندازی و اجرا کنید Get styles and workflow up and running

• سبک ها و گردش کار را راه اندازی و اجرا کنید Get styles and workflow up and running

• پس زمینه: از Git با SourceTree استفاده کنید Background: Use Git with SourceTree

• پس زمینه: از Git با SourceTree استفاده کنید Background: Use Git with SourceTree

• پس زمینه: استفاده از خط فرمان Background: Command Line Usage

• پس زمینه: استفاده از خط فرمان Background: Command Line Usage

• زمینه: امت Background: Emmet

• پس زمینه: میانبرهای VSC Background: VSC Shortcuts

• پس زمینه: میانبرهای VSC Background: VSC Shortcuts

• زمینه: 3 بخش اصلی Tailwindcss Background: The 3 main parts of Tailwindcss

• زمینه: 3 بخش اصلی Tailwindcss Background: The 3 main parts of Tailwindcss

مینی پروژه کامل Complete mini project

• کانتینر + نقاط شکست + افزونه Debug Screen Container + breakpoints + Debug Screen Plugin

• لیست ها را قالب بندی کنید Format the lists

• مقدمه ای بر طراحی واکنشگرا با Tailwindcss Introduction to responsive design with Tailwindcss

• از Flexbox برای Layout نیز استفاده کنید + 2 پیشرفت کوچک Use Flexbox for Layout as well + 2 small improvements

• الگوهای پس زمینه Background patterns

• ایجاد "حالت تاریک" Create "Dark Mode"

• نمایش پویا دکمه حالت تاریک Dynamic display of the dark mode button

• خلاصه ی پروژه Project summary

مینی پروژه کامل Complete mini project

• کانتینر + نقاط شکست + افزونه Debug Screen Container + breakpoints + Debug Screen Plugin

• برنامه ریزی وب سایت مینی Planning the mini website

• برنامه ریزی وب سایت مینی Planning the mini website

• به طور تقریبی محتوای صفحه را مرتب کنید Roughly arrange the page content

• به طور تقریبی محتوای صفحه را مرتب کنید Roughly arrange the page content

• قالب بندی و سرفصل های از پیش تعیین شده Format and preset headings

• قالب بندی و سرفصل های از پیش تعیین شده Format and preset headings

• قالب بندی متن در Tailwindcss Text formatting in Tailwindcss

• قالب بندی متن در Tailwindcss Text formatting in Tailwindcss

• فونت عنوان خود را تعریف کنید Define your own heading font

• فونت عنوان خود را تعریف کنید Define your own heading font

• رنگ خود را اضافه کنید Add your own color

• رنگ خود را اضافه کنید Add your own color

• لیست ها را قالب بندی کنید Format the lists

• بقیه را برای رزولوشن lg فرمت کنید Format the rest for the lg-resolution

• بقیه را برای رزولوشن lg فرمت کنید Format the rest for the lg-resolution

• یک دکمه با نماد طراحی کنید Design a button with icon

• یک دکمه با نماد طراحی کنید Design a button with icon

• اطلاعات پس زمینه: نمادهای رایگان Background Info: Free Icons

• اطلاعات پس زمینه: نمادهای رایگان Background Info: Free Icons

• مقدمه ای بر طراحی واکنشگرا با Tailwindcss Introduction to responsive design with Tailwindcss

• بهینه سازی برای نمایشگرهای متوسط ​​و کوچک (md + sm) Optimization for medium and small screens (md + sm)

• بهینه سازی برای نمایشگرهای متوسط ​​و کوچک (md + sm) Optimization for medium and small screens (md + sm)

• از Flexbox برای Layout نیز استفاده کنید + 2 پیشرفت کوچک Use Flexbox for Layout as well + 2 small improvements

• بهینه سازی برای صفحه نمایش های بسیار کوچک Optimize for very small screens

• بهینه سازی برای صفحه نمایش های بسیار کوچک Optimize for very small screens

• بهینه سازی برای صفحه نمایش های بسیار بزرگ (xl + 2xl) Optimize for very large screens (xl + 2xl)

• بهینه سازی برای صفحه نمایش های بسیار بزرگ (xl + 2xl) Optimize for very large screens (xl + 2xl)

• الگوهای پس زمینه Background patterns

• تصحیح برای صفحه نمایش های بسیار کوچک کروم Correction for Chrome very small screens

• تصحیح برای صفحه نمایش های بسیار کوچک کروم Correction for Chrome very small screens

• نقل قول بالا با علامت نقل قول و رنگ متفاوت Quote above with quotation marks and a different color

• نقل قول بالا با علامت نقل قول و رنگ متفاوت Quote above with quotation marks and a different color

• مقدمه ای بر ویژگی های پویا در Tailwind CSS Introduction to dynamic features in Tailwind CSS

• مقدمه ای بر ویژگی های پویا در Tailwind CSS Introduction to dynamic features in Tailwind CSS

• ایجاد "حالت تاریک" Create "Dark Mode"

• معرفی مختصر دکمه Alpinejs + Darkmode Brief introduction to Alpinejs + Darkmode button

• معرفی مختصر دکمه Alpinejs + Darkmode Brief introduction to Alpinejs + Darkmode button

• نمایش پویا دکمه حالت تاریک Dynamic display of the dark mode button

• برون سپاری سبک های دکمه Outsource button styles

• برون سپاری سبک های دکمه Outsource button styles

• CSS را با Purgecss کوچک کنید Shrink CSS with Purgecss

• CSS را با Purgecss کوچک کنید Shrink CSS with Purgecss

• خلاصه ی پروژه Project summary

پیکربندی پیشرفته Tailwind CSS Advanced configuration of Tailwind CSS

• گزینه های پیکربندی بیشتر Further configuration options

• زمینه: رنگ های پیشرفته Background: Advanced colors

• مثال: پالت رنگ خود را پیاده سازی کنید Example: Implement your own color palette

• زمینه: گرادیان رنگ Background: color gradients

• برون سپاری موضوع خود (از پیش تعیین شده) Outsourcing your own theme (presets)

• تنظیمات از پیش تعیین شده برای ظرف Presets for the container

• نتیجه گیری + برگه تقلب Conclusion + Cheat Sheet

پیکربندی پیشرفته Tailwind CSS Advanced configuration of Tailwind CSS

• اسکریپت دوره (PDF) برای پیکربندی پیشرفته Tailwind CSS Course Script (PDF) for Advanced Configuration of Tailwind CSS

• اسکریپت دوره (PDF) برای پیکربندی پیشرفته Tailwind CSS Course Script (PDF) for Advanced Configuration of Tailwind CSS

• پروژه جدید و نصب Tailwind CSS را کپی کنید New project and copy Tailwind CSS installation

• پروژه جدید و نصب Tailwind CSS را کپی کنید New project and copy Tailwind CSS installation

• گزینه های پیکربندی بیشتر Further configuration options

• زمینه: رنگ های پیشرفته Background: Advanced colors

• مثال: پالت رنگ خود را پیاده سازی کنید Example: Implement your own color palette

• زمینه: گرادیان رنگ Background: color gradients

• برون سپاری موضوع خود (از پیش تعیین شده) Outsourcing your own theme (presets)

• تنظیمات از پیش تعیین شده برای ظرف Presets for the container

• ویژگی های فردی را غیرفعال کنید Deactivate individual features

• ویژگی های فردی را غیرفعال کنید Deactivate individual features

• گسترش/غیرفعال کردن انواع Extend / disable variants

• گسترش/غیرفعال کردن انواع Extend / disable variants

• نتیجه گیری + برگه تقلب Conclusion + Cheat Sheet

حفاری های عمیق تر. به Tailwind CSS Digging Deeper. into Tailwind CSS

• پلاگین تایپوگرافی برای Tailwind CSS Typography Plugin for Tailwind CSS

• پلاگین تایپوگرافی را پیکربندی کنید Configure Typography plugin

• گزینه های سیستم شبکه Grid system options

حفاری های عمیق تر. به Tailwind CSS Digging Deeper. into Tailwind CSS

• نقاط شکست و ظرف خود را تعریف کنید (سخنرانی مهم!) Define own breakpoints and container (important lecture!)

• نقاط شکست و ظرف خود را تعریف کنید (سخنرانی مهم!) Define own breakpoints and container (important lecture!)

• پلاگین تایپوگرافی برای Tailwind CSS Typography Plugin for Tailwind CSS

• پلاگین تایپوگرافی را پیکربندی کنید Configure Typography plugin

• PDF فعلی این بخش The current PDF for this section

• PDF فعلی این بخش The current PDF for this section

• گزینه های سیستم شبکه Grid system options