text-shadow-*

ظلّ النص text-shadow-*

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

text-shadow خاصّية CSS قديمة، لكن Tailwind لم يوفّر لها أصنافًا جاهزة إلا في الإصدار v4.1 — قبلها كانت تحتاج صياغة اعتباطية كاملة مثل [text-shadow:0_2px_4px_rgb(0_0_0/0.3)]. الآن تتوفّر أحجام جاهزة من text-shadow-2xs (خفيف جدًّا) إلى text-shadow-lg (واضح)، بالإضافة إلى text-shadow-none لإزالته.

يمكن تخصيص لون الظلّ بنفس أسلوب باقي الألوان (text-shadow-sky-300)، وضبط شفافيته بشرطة مائلة (text-shadow-lg/50) تمامًا كما مع box-shadow ولون النص العادي — اتّساق كامل مع بقية نظام الألوان في الإطار.

الصياغة

class="text-shadow-lg"           /* ظلّ أسود افتراضي */
class="text-shadow-lg text-shadow-purple-500/50"  /* لون وشفافية مخصّصان */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-3 bg-gray-800 p-6">
  <p class="text-shadow-lg text-3xl font-bold text-white">عنوان بظلّ واضح</p>
  <p class="text-shadow-lg text-shadow-purple-400/60 text-2xl font-bold text-white">عنوان بظلّ بنفسجي</p>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
text-shadow-2xs..lg	درجات شدّة الظلّ من الأخفّ إلى الأوضح
text-shadow-none	إزالة الظلّ
text-shadow-{color}	لون الظلّ من لوحة الثيم
text-shadow-{size}/{opacity}	شفافية الظلّ (text-shadow-lg/50)

💡 نصائح عملية

ظلّ خفيف (text-shadow-2xs أو xs) على نصّ فوق صورة يحسّن القراءة دون أن يبدو مصطنعًا
هذه الأصناف الجاهزة من v4.1 — إن كنت تعمل على مشروع v4.0 قد تحتاج صياغة اعتباطية بدلًا منها

⚠️ أخطاء شائعة

استخدام text-shadow-lg على نصّ صغير جدًّا — الظلّ يطغى على وضوح الحروف بدل تحسينه
المبالغة بظلال قوية على كل نصوص الصفحة — التأثير الأفضل مع الاستخدام المحدود على العناوين البارزة فقط

خصائص ذات صلة

mask-* قناع العنصر (Mask)

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs