القيم الديناميكية في Tailwind 4

من المزايا الجديدة والمهمة في Tailwind 4 واللي كانت تمثل مشكلة مزعجة في الإصدارات السابقة هي القيم الديناميكية (Dynamic Values).

المشكلة في Tailwind 3

في Tailwind 3، كان عندك قدرة تستخدم قيم محددة مسبقاً فقط. مثلاً تقدر تستخدم h-80 لتحديد الارتفاع، لكن ما تقدر تستخدم h-82 أو أي رقم ثاني مو معرّف في المكتبة.

كان الحل الوحيد إنك تستخدم Arbitrary Values بالطريقة هذي:

<div class="h-[328px]">...</div>

وهذا يخليك تكتب أكواد أطول وأصعب في القراءة.

الحل في Tailwind 4

الآن مع Tailwind 4، تقدر تستخدم أي رقم تبيه مباشرة! مو بس مع ال height، لكن مع كل الخصائص اللي فيها مقاسات.

<!-- كل هذي تشتغل الحين -->
<div class="w-200">...</div>
<div class="border-3">...</div>
<div class="gap-15">...</div>
<div class="p-42">...</div>
<div class="m-73">...</div>

الفوائد

1. سهولة الكتابة

ما عاد تحتاج تفكر “هل هذا الرقم معرّف؟” أو تضطر تستخدم Arbitrary Values.

2. قابلية القراءة

الكود يصير أوضح وأسهل للقراءة:

<!-- قبل -->
<div class="h-[284px] w-[356px] p-[18px]">...</div>

<!-- بعد -->
<div class="h-71 w-89 p-4.5">...</div>

3. المرونة

تقدر تضبط التصميم بشكل دقيق بدون ما تضطر تعدل ملف الإعدادات.

ملاحظات مهمة

• القيم تُحسب بناءً على النظام الافتراضي (غالباً 4px = 1 unit)
• تقدر تستخدم أرقام عشرية مثل w-12.5
• الميزة متوافقة مع جميع الخصائص التي تقبل قيم رقمية

الخلاصة

ميزة Dynamic Values في Tailwind 4 جعلت الكتابة أسرع والكود أنظف، وهذا يخليك تركز أكثر على التصميم بدل ما تفكر في القيود التقنية.

إذا ما جربت Tailwind 4 بعد، أنصحك بشدة تجربه وتشوف الفرق بنفسك!