🌬️ مرجع فئات Tailwind CSS بالعربي

aspect-*

نسبة الأبعاد

تثبّت نسبة العرض إلى الارتفاع لعنصر (صورة، فيديو، إطار مضمّن) بلا حساب الأبعاد يدويًّا.

columns-*

تخطيط الأعمدة

يوزّع محتوى حاوية على عدّة أعمدة تلقائيًّا بأسلوب الصحف والمجلّات، بدل استخدام flex أو grid.

object-*

قصّ ومطابقة الصور

تحدّد كيف تُطابِق الصورة أو الفيديو أبعاد الصندوق المحدّد لها: تقصّ، تتقلّص، أو تتمدّد.

object-{position}

موضع القصّ

تحدّد أي جزء من الصورة يبقى ظاهرًا عند قصّها بـ object-cover — الأعلى، المركز، زاوية معيّنة.

line-clamp-*

قصّ النص متعدّد الأسطر

يقصّ فقرة نصّية عند عدد أسطر محدّد ويضيف نقاط حذف تلقائية — بديل نظيف عن truncate للنص متعدّد الأسطر.

text-wrap / text-balance / text-pretty

التفاف النص الذكي

تتحكّم بكيفية توزيع الكلمات على الأسطر — توازن أنيق للعناوين، ومنع كلمة يتيمة وحيدة في نهاية الفقرة.

snap-*

الالتقاط عند التمرير

يجعل التمرير يتوقّف ويلتقط عند نقاط محدّدة تلقائيًّا — أساس بناء carousel أو معرض صور بلا جافاسكربت.

scroll-m-* / scroll-p-*

هامش وحشو التمرير

يضبط المسافة الاحتياطية عند التمرير لعنصر معيّن — يُستخدم مع scroll-snap وروابط التنقّل الداخلي (anchor).

accent-*

لون عناصر النموذج الأصلية

يغيّر لون عناصر النموذج التي يرسمها المتصفح نفسه (مربّع الاختيار، الراديو، شريط النطاق) دون إعادة بنائها بالكامل.

cursor-*

شكل المؤشّر

يحدّد شكل مؤشّر الفأرة فوق العنصر — إشارة بصرية مهمّة توضّح للمستخدم ما إذا كان العنصر قابلًا للنقر أو معطّلًا.

text-shadow-*

ظلّ النص

يضيف ظلًّا خلف النص لعمق بصري — أُضيفت كأصناف جاهزة في Tailwind v4.1 بعد أن كانت تحتاج قيمة اعتباطية كاملة.

mask-*

قناع العنصر (Mask)

يخفي أجزاء من عنصر باستخدام تدرّج أو صورة كقالب شفافية — أُضيفت كأصناف جاهزة في Tailwind v4.1 لتأثيرات تلاشٍ أنيقة.