Tailwind CSS
نسّق بسرعة باستخدام الأصناف المساعدة.
Tailwind CSS lets you style a page without leaving your HTML. Small classes such as p-4, flex and text-lg each do one job, and together they build any design. The same markup can lay out left-to-right English and right-to-left Persian.
This track starts from basic HTML and CSS. You will set Tailwind up, learn its scales for spacing, colour and type, build layouts with flex and grid, make them responsive and interactive, lay them out right to left with logical utilities, and add your own design tokens. Then you go one level up with container queries, motion and state variants, and finish by building a bilingual dashboard. Every class you meet is a real Tailwind CSS 4 class, and you will see the CSS behind it.
- الدروس
- ١٤
- الوقت
- ٢ ساعة
- المستوى
- مبتدئ
دروس هذا المسار بالإنجليزية حاليًا.
- البرونز متاحة
- الفضة متاحة
- الذهب مقفلة
مستعد لإثبات نفسك؟
ثلاثة امتحانات في انتظارك: البرونز والفضة والذهب.
ما ستتمكن من فعله
- Set up Tailwind CSS 4 in a project with one CSS import
- Style any element with spacing, colour, type, border and shadow utilities
- Build layouts with flex and grid utilities
- Make interfaces responsive and interactive with
md:,hover:,focus-visible:anddark: - Lay out Persian and English from the same markup with logical utilities
- Add your own design tokens with
@themeand keep markup tidy with components
الرحلة
١ الوحدة ١Utility first
The utility-first idea, the setup, the scales for spacing, colour and type, and layout with flex and grid.
٠ / ٥٢ الوحدة ٢Real interfaces
Responsive layouts, hover and focus states, dark mode, right to left with logical utilities, and your own tokens.
٠ / ٥٣ الوحدة ٣Next level
Container queries, motion, styling from data and ARIA state, and a bilingual dashboard project.
٠ / ٤