المراجعة الشاملة | Tailwind CSS

Display & Position

التحكم في طريقة عرض وموضع العناصر

12 class

block

display: block

بيخلي العنصر يأخد سطر كامل

inline-block

display: inline-block

زي inline لكن بيقبل width و height

flex

display: flex

تفعيل Flexbox على العنصر

grid

display: grid

تفعيل CSS Grid

hidden

display: none

إخفاء العنصر كلياً

relative

position: relative

مرجع للـ absolute children

absolute

position: absolute

مرتبط بأقرب relative parent

fixed

position: fixed

ثابت مع السكرول — للـ navbars

sticky

position: sticky

يتثبت لما يوصل لحد معين

inset-0

top:0; right:0; bottom:0; left:0

يملا الـ parent كله (مع absolute)

z-10 / z-50

z-index: 10 / 50

ترتيب العناصر فوق بعض

overflow-hidden

overflow: hidden

يقطع المحتوى اللي بيطلع

Flexbox

المحاذاة والتوزيع الأفقي والعمودي

16 class

Class	CSS	الاستخدام
flex-row	flex-direction: row	الاتجاه الافتراضي — أفقي
flex-col	flex-direction: column	عمودي — الأكثر استخداماً في الموبايل
flex-wrap	flex-wrap: wrap	العناصر تنزل لسطر جديد لو ضاقت المساحة
justify-start/center/end	justify-content: …	المحاذاة الأفقية للعناصر
justify-between	justify-content: space-between	مسافات بين العناصر — الأكثر استخداماً في الـ navbars
items-start/center/end	align-items: …	المحاذاة العمودية
items-stretch	align-items: stretch	كل العناصر تبقى نفس الارتفاع
gap-4	gap: 1rem	مسافة بين العناصر بدون margin
gap-x-4 / gap-y-4	column-gap / row-gap	مسافة أفقية أو عمودية فقط
flex-1	flex: 1 1 0%	يأخد كل المساحة المتاحة
flex-none	flex: none	حجم ثابت — ما يتأثرش بالـ flex
flex-shrink-0	flex-shrink: 0	ما يصغرش لو ضاق المكان — مهم للـ icons
self-center	align-self: center	محاذاة عنصر واحد بشكل مستقل
order-first	order: -9999	يتعرض أول عنصر بغض النظر عن مكانه في HTML
grow / shrink	flex-grow:1 / flex-shrink:1	التحكم في التمدد والتقلص

CSS Grid

شبكات متعددة الأعمدة بسهولة

10 class

Class	CSS	الشرح
grid-cols-1 → 12	grid-template-columns: repeat(N, 1fr)	عدد الأعمدة
grid-cols-none	grid-template-columns: none	إلغاء الـ grid columns
col-span-2	grid-column: span 2 / span 2	عنصر يأخد عمودين
col-start-1	grid-column-start: 1	يبدأ من عمود محدد
col-end-3	grid-column-end: 3	ينتهي عند عمود محدد
row-span-2	grid-row: span 2 / span 2	عنصر يأخد صفين
grid-rows-3	grid-template-rows: repeat(3, 1fr)	عدد الصفوف
auto-cols-fr	grid-auto-columns: minmax(0, 1fr)	أعمدة تلقائية متساوية
place-items-center	place-items: center	توسيط كامل أفقي وعمودي
place-content-between	place-content: space-between	توزيع المحتوى

Spacing — الـ Scale

كل رقم × 4 = عدد الـ pixels

مرجع كامل

Class (مثال p-)	rem	px
p-0	0	0px
p-px	1px	1px
p-0.5	0.125rem	2px
p-1	0.25rem	4px
p-2	0.5rem	8px
p-3	0.75rem	12px
p-4	1rem	16px ⭐ (الأكثر استخداماً)
p-5	1.25rem	20px
p-6	1.5rem	24px ⭐
p-8	2rem	32px ⭐
p-10	2.5rem	40px
p-12	3rem	48px
p-16	4rem	64px
p-20	5rem	80px
p-24	6rem	96px
p-32	8rem	128px
p-40	10rem	160px
p-48	12rem	192px
p-64	16rem	256px
p-96	24rem	384px

الـ shortcuts: px- = left+right، py- = top+bottom، pt-/pb-/pr-/pl- = جهة واحدة. mx-auto = توسيط أفقي (الأشهر)، space-x-4 = مسافة أفقية بين الـ children مباشرة.

Width & Height

أبعاد العناصر

Class	قيمة	استخدام شائع
w-full	100%	يأخد عرض الـ parent كامل
w-screen	100vw	عرض الشاشة كلها
w-auto	auto	عرض أوتوماتيك حسب المحتوى
w-1/2 / w-1/3 / w-2/3	50% / 33.3% / 66.7%	نسب مئوية (fractions)
w-fit	fit-content	عرض يساوي المحتوى بالضبط
max-w-sm/md/lg/xl/2xl	384/448/512/576/672px	تحديد أقصى عرض
max-w-screen-xl	1280px	أقصى عرض لصفحات كاملة
max-w-[700px]	700px (arbitrary)	أي قيمة مخصصة
h-screen	100vh	ارتفاع الشاشة — في الـ hero sections
min-h-screen	min-height: 100vh	الصفحة ما تبقاش أقل من الشاشة
h-full	100%	ارتفاع الـ parent
aspect-square	aspect-ratio: 1/1	مربع تلقائي
aspect-video	aspect-ratio: 16/9	نسبة الفيديو

Typography

النصوص والخطوط

مرجع شامل

text-xs → text-9xl

font-size: 0.75rem → 8rem

12 حجم جاهز — xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl

font-thin → font-black

font-weight: 100 → 900

thin(100) / light(300) / normal(400) / medium(500) / semibold(600) / bold(700) / black(900)

leading-none → leading-loose

line-height

التباعد بين الأسطر — relaxed أو loose للنصوص الطويلة

tracking-tight → tracking-widest

letter-spacing

المسافة بين الحروف — wider للـ labels والـ badges

text-left/center/right

text-align

محاذاة النص

uppercase / lowercase

text-transform

تحويل الحروف — uppercase مع tracking-widest يعطي look احترافي

truncate

overflow:hidden; white-space:nowrap; text-overflow:ellipsis

قطع النص الطويل مع إضافة ...

bg-clip-text text-transparent

background-clip: text + transparent color

Gradient على النص نفسه — تقنية الـ Hero titles

underline decoration-2

text-decoration + decoration-thickness

تسطير مع تحكم في السُمك واللون

line-clamp-3

-webkit-line-clamp: 3

قطع النص بعد 3 أسطر — للـ cards

Color Palette

الألوان الجاهزة في Tailwind

BLUE

CYAN

PURPLE

EMERALD

ROSE

SLATE (للـ Dark UI)

Gradients

التدرجات اللونية

Class	CSS
bg-gradient-to-r	background-image: linear-gradient(to right, …)
bg-gradient-to-l	linear-gradient(to left, …)
bg-gradient-to-t	linear-gradient(to top, …)
bg-gradient-to-b	linear-gradient(to bottom, …)
bg-gradient-to-br	linear-gradient(to bottom right, …)
from-blue-500	--tw-gradient-from: #3b82f6
via-purple-500	--tw-gradient-via: #a855f7
to-pink-500	--tw-gradient-to: #ec4899
from-transparent	من شفاف — لعمل fade

مثال على Gradients

to-r: blue → purple

to-br: cyan → indigo → pink

to-b: yellow → transparent

Borders & Rounded

الحدود والزوايا

border

border-width: 1px

حد 1px من كل الجهات

border-2 / border-4

border-width: 2px / 4px

زيادة سمك الحد

border-t / border-b

border-top / border-bottom

حد من جهة واحدة فقط

border-blue-500

border-color: #3b82f6

لون الحد

border-dashed

border-style: dashed

حد منقط — للـ dropzones

divide-y / divide-x

border بين الـ children تلقائياً

بدل ما تضيف border-b على كل child

rounded-sm → rounded-full

border-radius: 2px → 9999px

sm/md/lg/xl/2xl/3xl/full

rounded-tl-xl

border-top-left-radius: 0.75rem

تدوير زاوية واحدة فقط

ring-2 ring-blue-500

box-shadow: 0 0 0 2px #3b82f6

حد خارج العنصر بـ box-shadow — للـ focus states

ring-offset-2

مسافة بين العنصر والـ ring

بيعمل مساحة بيضاء بين العنصر والـ ring

Shadows & Blur

الظلال والضبابية

Class	CSS (مبسط)	استخدام
shadow-sm	0 1px 2px rgba(0,0,0,.05)	ظل خفيف للعناصر الصغيرة
shadow	0 1px 3px rgba(0,0,0,.1)	ظل افتراضي
shadow-md	0 4px 6px rgba(0,0,0,.1)	للـ cards
shadow-lg	0 10px 15px rgba(0,0,0,.1)	للـ dropdowns والـ modals
shadow-xl	0 20px 25px rgba(0,0,0,.1)	بطاقات بارزة
shadow-2xl	0 25px 50px rgba(0,0,0,.25)	Overlays ضخمة
shadow-inner	inset 0 2px 4px rgba(0,0,0,.05)	ظل داخلي للـ inputs
shadow-none	box-shadow: none	إلغاء الظل
shadow-blue-500/30	ظل ملون بـ opacity 30%	Glow effect — Tailwind v3
blur-sm / blur / blur-md	filter: blur(4px/8px/12px)	تشويش العنصر نفسه
backdrop-blur-md	backdrop-filter: blur(12px)	تشويش ما وراء العنصر — Glassmorphism
backdrop-blur-xl	backdrop-filter: blur(24px)	Glass effect قوي

Transforms & 3D

التحريك والتدوير والتحجيم

Class	CSS	متى تستخدمه
scale-95 / scale-105	transform: scale(0.95/1.05)	تصغير/تكبير — مهم في active:scale-95
-translate-y-2	transform: translateY(-0.5rem)	رفع العنصر لأعلى — hover effects
translate-x-4	transform: translateX(1rem)	تحريك أفقي
rotate-45	transform: rotate(45deg)	تدوير — للـ icons والـ arrows
-rotate-3	transform: rotate(-3deg)	ميل خفيف للـ cards
skew-x-6	transform: skewX(6deg)	إمالة أفقية
origin-center	transform-origin: center	نقطة الدوران
origin-top-left	transform-origin: top left	للـ tooltips والـ dropdowns
opacity-0 → opacity-100	opacity: 0 → 1	الشفافية — مهم في الـ animations
mix-blend-multiply	mix-blend-mode: multiply	مزج ألوان الصور
grayscale	filter: grayscale(100%)	تحويل الصورة لرمادي

الـ 3D Transforms في Tailwind بتحتاج CSS عادي مع style="" أو tailwind.config: transform-style:preserve-3d، perspective:1000px، backface-visibility:hidden. راجع الدرس 12 في الـ lessons للشرح الكامل.

Transitions

التغيير السلس

Class	CSS
transition	transition-property: color,background,border,…; duration:150ms
transition-all	transition-property: all
transition-colors	transition-property: color,background-color,border-color,…
transition-transform	transition-property: transform
transition-opacity	transition-property: opacity
duration-75	transition-duration: 75ms
duration-150	transition-duration: 150ms (الافتراضي)
duration-300	transition-duration: 300ms ⭐ الأشهر
duration-500	transition-duration: 500ms
duration-700	transition-duration: 700ms
ease-linear	transition-timing-function: linear
ease-in	cubic-bezier(0.4, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.2, 1) ⭐ الأجمل
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1) ⭐
delay-75 / delay-150 / delay-300	transition-delay

Animations الجاهزة

تأثيرات متحركة بـ class واحدة

شوف التأثيرات

animate-spin

animate-ping

animate-pulse

⬇

animate-bounce

Responsive Breakpoints

Mobile-First — الأصغر أولاً

Prefix	Min Width	الجهاز المستهدف	مثال
(بدون prefix)	0px	كل الأجهزة (موبايل first)	text-sm
sm:	640px	موبايل كبير / landscape	sm:text-base
md:	768px	تابلت	md:grid-cols-2
lg:	1024px	لابتوب صغير	lg:grid-cols-3
xl:	1280px	ديسكتوب	xl:grid-cols-4
2xl:	1536px	شاشات كبيرة	2xl:text-7xl
max-md:	أقل من 768px	موبايل فقط (عكسي)	max-md:hidden

State Variants

تطبيق الـ styles على حالات مختلفة

Variant	متى بيشتغل	مثال
hover:	لما الماوس يكون فوق العنصر	hover:bg-blue-600
focus:	لما العنصر يتحدد (click/tab)	focus:ring-2
active:	لما يتضغط	active:scale-95
disabled:	لما يكون disabled	disabled:opacity-50
group-hover:	hover على الـ parent (group)	group-hover:text-white
peer-focus:	focus على عنصر "أخ" (peer)	peer-focus:text-blue-500
dark:	في الـ dark mode	dark:bg-gray-900
first: / last:	أول/آخر child	first:border-t-0
odd: / even:	الصفوف الفردية/الزوجية	even:bg-gray-50
placeholder:	نص الـ placeholder في الـ inputs	placeholder:text-gray-400
before: / after:	pseudo-elements	before:content-['✓']
aria-checked:	ARIA states — للـ accessibility	aria-checked:bg-blue-500