-
الأساسيات
- مقدمة عن Tailwind – إيه هو وليه نستخدمه بدل CSS العادي؟
- تثبيت Tailwind في مشروع (Next.js / React / Vite)
- مفهوم Utility-First Design في Tailwind
- الألوان (Colors) في Tailwind CSS — استخدام الـ Palette الجاهزة وتخصيص الألوان
- الـ Spacing (Margin – Padding) في Tailwind CSS
- الـ Typography (Font Size – Weight – Line Height) في Tailwind
- الـ Borders & Radius & Shadows في Tailwind
- التحكم في الـ Width / Height في Tailwind
- Flexbox + Grid بالـ Utilities في Tailwind
- الـ Backgrounds في Tailwind (Colors – Gradients – Images)
-
الأدوات المتقدمة (Advanced Utilities)
- الـ Responsiveness (Breakpoints & Media Queries) في Tailwind
- الـ Pseudo Classes في Tailwind CSS (Hover, Focus, Active, Group, Peer)
- الـ Dark Mode في Tailwind CSS
- Transitions & Animations في Tailwind
- Positioning in Tailwind (Absolute – Relative – Fixed – Sticky)
- Z-Index & Layering في Tailwind
- Overflow & Scroll Utilities في Tailwind
- Customizing Config File (tailwind.config.js) in Tailwind
-
Ecosystem Integration
- Tailwind مع الـ Forms (Input – Button – Select)
- دمج Tailwind مع React Components.
- استخدام Plugins جاهزة (Typography – Forms – Aspect Ratio) في Tailwind
- كتابة Utilities مخصصة (Custom Classes) في Tailwind
- إعادة استخدام الـ Styles مع @apply في Tailwind
- بناء Theme مخصص لمشروعك في Tailwind
- التعامل مع الأيقونات في Tailwind (Heroicons – Lucide)
-
Mastery Level
-
Final Projects
