القيم الاعتباطية وتكلفتها
استخدم صيغة الأقواس مثل w-[347px] للقيم المخصصة لمرة واحدة، وافهم المفاضلة بين المرونة واحتمال تضخم ملف تنسيق الأنماط.
القيم الاعتباطية وتكلفتها درس مجاني في Tailwind CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Tailwind CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
ما هي القيم الاعتباطية
تتيح لك صيغة القيم الاعتباطية في Tailwind استخدام أي قيمة CSS مباشرةً داخل اسم الصنف، وذلك باستخدام الأقواس المربعة. فبدلًا من الاقتصار على المقياس المحدد مسبقًا في Tailwind، يمكنك كتابة w-[347px] أو text-[#1a2b3c] أو grid-cols-[1fr_2fr_1fr].
هذه الميزة، التي يفعّلها محرك JIT، من أقوى إمكانات Tailwind. فهي تسد الفجوة بين أصناف الأدوات والحالات النادرة التي تحتاج فعلًا إلى قيمة دقيقة خارج المقياس.
<div class="w-[347px] h-[calc(100vh-64px)] bg-[#1a1a2e] text-[#e2e8f0]">
Arbitrary values for precise control
</div>
<div class="grid grid-cols-[1fr_2fr_1fr] gap-[22px]">
Custom grid layout with arbitrary columns
</div>مرجع صيغة القيم الاعتباطية
تعمل صيغة الأقواس مع أي بادئة لأداة من Tailwind. وتُمرَّر القيمة الموجودة داخل الأقواس مباشرةً بوصفها قيمة CSS. أما المسافات داخل القيمة، فتمثَّل بشرطات سفلية (ويستبدلها Tailwind قبل التحليل).
بالنسبة إلى الأدوات التي تُولِّد خصائص CSS متعددة، تتلقى الخاصية المعنية فقط القيمة الاعتباطية. فعلى سبيل المثال، يضبط p-[12px] قيم الحشو الأربع على 12px، تمامًا مثل p-4 ولكن بقيمة مخصصة.
<!-- Width and height -->
<div class="w-[240px] h-[180px]"></div>
<!-- Custom color -->
<div class="bg-[#f0a500] text-[#2d3748]"></div>
<!-- Calc values -->
<div class="top-[calc(50%_-_24px)]"></div>
<!-- CSS variables -->
<div class="bg-[var(--primary-color)]"></div>
<!-- Custom grid -->
<div class="grid-cols-[200px_1fr_minmax(200px,_1fr)]"></div>
<!-- Spacing with custom value -->
<div class="mt-[7px] px-[18px]"></div>متى تستخدم القيم الاعتباطية
تكون القيم الاعتباطية مناسبة في حالات محددة:
- التموضع الدقيق: تلميح أداة يجب أن يحاذي نقطة مرجعية بدقة (
top-[3px]) - القيود الخارجية: مطابقة ارتفاع مكون تابع لجهة خارجية أو نصف قطر حدوده
- ألوان العلامة التجارية الفريدة: لون للعلامة التجارية لا ينسجم جيدًا مع لوحة Tailwind (
bg-[#e63946]) - تعبيرات CSS الديناميكية: قيم
calcأوminأوmaxأوclamp
ولا تكون مناسبة للقيم التي تنتمي إلى نظام التصميم — استخدم توسيع السمة لهذه القيم.
<!-- Appropriate: precise positioning calculation -->
<div class="absolute top-[calc(50%_-_24px)] left-[calc(50%_-_24px)]"
aria-label="Loading">
Loading spinner centered
</div>
<!-- Appropriate: brand color not in default palette -->
<header class="bg-[#e63946] text-white">
Brand header
</header>
<!-- Inappropriate: use theme extension instead -->
<!-- <div class="w-[96px]"> Use w-24 (96px) from default scale instead! -->
<div class="w-24">Use the scale utility</div>القيم الاعتباطية مقابل توسيع السمة
عندما تُستخدم قيمة في مواضع متعددة ضمن مشروعك، فمن الأفضل وضعها في توسيع السمة بدلًا من استخدامها كقيمة اعتباطية. تؤدي إضافتها إلى السمة إلى منحها اسمًا دلاليًا، وضمان اتساقها، وإتاحة تغييرها من موضع واحد.
قاعدة جيدة: إذا استخدمت قيمة اعتباطية مرتين في ملفين مختلفين، فانقلها إلى السمة. أما إذا ظهرت مرة واحدة فقط في سياق محدد جدًا، فلا مشكلة في إبقائها قيمة اعتباطية.
// Instead of repeating w-[347px] in 5 components:
// ❌ Scattered arbitrary values
// <div class="w-[347px]">...</div> (component A)
// <div class="w-[347px]">...</div> (component B)
// <div class="w-[347px]">...</div> (component C)
// ✅ Theme extension — one source of truth
// tailwind.config.js:
module.exports = {
theme: {
extend: {
width: {
'sidebar': '347px',
},
},
},
};
// Usage:
// <div class="w-sidebar">...</div> -- consistent and namedتكلفة كل قيمة اعتباطية
تُولِّد كل قيمة اعتباطية فريدة قاعدة CSS فريدة. فاستخدام w-[347px] خمس مرات في الملف نفسه لا يُولِّد إلا قاعدة CSS واحدة (إذ يزيل JIT التكرار). لكن استخدام w-[347px] وw-[348px] وw-[349px] في مكونات مختلفة يؤدي إلى توليد قواعد منفصلة — ثلاث قواعد منفصلة لقيم لا يختلف بعضها عن بعض إلا ببكسل واحد.
هذه هي تكلفة القيم الاعتباطية: فقد تقضي على إعادة استخدام CSS التي تجعل أصناف الأدوات فعّالة. فعشرة عروض اعتباطية مختلفة قليلًا تُولِّد عشر قواعد منفصلة بدلًا من أداة مشتركة واحدة.
/* Each generates a separate CSS rule */
.w-\[347px\] { width: 347px; }
.w-\[348px\] { width: 348px; }
.w-\[349px\] { width: 349px; }
.top-\[calc\(50\%-24px\)\] { top: calc(50% - 24px); }
.top-\[calc\(50\%-32px\)\] { top: calc(50% - 32px); }
/* Compare: the scale utilities share values across all usages */
/* .w-24 is generated once and reused wherever w-24 appears */صيغة الخصائص الاعتباطية
بالإضافة إلى بادئات الأدوات، يدعم JIT في Tailwind أيضًا خصائص CSS الاعتباطية باستخدام الصيغة [property:value] — أي قوسين مربعين يحتويان على اسم خاصية CSS وقيمة، يفصل بينهما نقطتان.
تُستخدم هذه الصيغة كحل أخير لخصائص CSS التي لا تتوفر لها أداة في Tailwind، مثل [mask-image:linear-gradient(...)] أو [scroll-snap-type:x_mandatory] أو الخصائص ذات البادئات الخاصة بالمورّد. استخدمها باعتدال — فإذا وجدت نفسك تستخدم كثيرًا من الخصائص الاعتباطية، ففكّر في إضافة إضافة Tailwind بدلًا من ذلك.
<!-- Arbitrary CSS property -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]
[scroll-snap-type:y_mandatory]
[-webkit-line-clamp:3]">
Content with non-utility CSS properties
</div>
<!-- Also works with variants -->
<div class="hover:[text-decoration:underline_wavy_red]
focus:[outline:2px_solid_blue]">
Custom hover/focus styles via arbitrary property
</div>القيم الاعتباطية مع التنويعات
تتوافق القيم الاعتباطية بالكامل مع جميع بادئات التنويعات. يمكنك الجمع بين التنويعات المتجاوبة وhover وfocus وdark وغيرها مع أي قيمة اعتباطية، بالطريقة نفسها التي تعمل بها الأدوات العادية.
يمنحك ذلك كامل قوة نظام التنويعات في Tailwind للقيم المخصصة. فكل من لون hover مخصص خارج المقياس، أو عرض مخصص متجاوب، أو قيمة لون اعتباطية في الوضع الداكن، يعمل بسلاسة.
<!-- Responsive arbitrary width -->
<div class="w-[240px] md:w-[320px] lg:w-[400px]">
Width changes at each breakpoint
</div>
<!-- Dark mode arbitrary color -->
<div class="bg-[#f8f9fa] dark:bg-[#1a1a2e] text-[#212529] dark:text-[#f8f9fa]">
Light/dark mode with arbitrary hex colors
</div>
<!-- Hover with arbitrary value -->
<button class="bg-[#e63946] hover:bg-[#c1121f] text-white px-4 py-2 rounded-lg">
Custom brand button
</button>القيم اللونية الاعتباطية والشفافية
عند استخدام ألوان hex اعتباطية، يمكنك أيضًا تطبيق مُعدِّل الشفافية باستخدام شرطة مائلة: يضبط bg-[#e63946]/50 خلفية العنصر على شفافية قدرها 50%. ويعمل ذلك لأن صيغة الشفافية بالشرطة المائلة من ميزات JIT، وتُطبَّق سواء أكان اللون الأساسي من اللوحة أم قيمة اعتباطية.
يمكنك أيضًا استخدام دوال rgba() أو hsl() مباشرةً داخل الأقواس للتحكم في الشفافية أو نموذج الألوان للقيم الاعتباطية.
<!-- Arbitrary color with opacity modifier -->
<div class="bg-[#e63946]/50">50% opacity red</div>
<div class="bg-[#e63946]/75">75% opacity red</div>
<!-- RGB function -->
<div class="bg-[rgb(230,57,70)]">RGB red</div>
<!-- HSL function -->
<div class="bg-[hsl(353,76%,55%)]">HSL red</div>
<!-- RGBA for direct alpha control -->
<div class="bg-[rgba(230,57,70,0.5)]">RGBA with alpha</div>محارف الهروب في القيم الاعتباطية
تحتاج بعض المحارف داخل القيم الاعتباطية إلى محارف هروب لأنها تحمل معنى في CSS أو HTML. في القيم الاعتباطية في Tailwind، استخدم الشرطات السفلية للمسافات (ويحوّلها Tailwind تلقائيًا)، وقم بتهريب الأقواس والمحارف الخاصة الأخرى داخل calc() باستخدام الشرطات السفلية للمسافات داخل الدالة.
بالنسبة إلى قيم URL (مثل صور الخلفية)، ضع القيمة بين علامتي اقتباس مفردتين: bg-[url('/img/hero.png')]. ويحافظ Tailwind على علامتي الاقتباس المفردتين في CSS المُولَّد.
<!-- Underscore = space in arbitrary values -->
<div class="grid grid-cols-[200px_1fr] gap-[10px_20px]">
Column gap 10px, row gap 20px
</div>
<!-- calc with underscore-spaces -->
<div class="w-[calc(100%_-_64px)]">
Full width minus 64px
</div>
<!-- URL as background image -->
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center h-64">
Hero image
</div>راجع قيمك الاعتباطية
ابحث دوريًا في قاعدة الشيفرة عن جميع استخدامات القيم الاعتباطية لتحديد المرشحين لاستخراجهم إلى السمة. يحدد بحث grep سريع كل صنف بين قوسين في مشروعك:
كل قيمة تظهر أكثر من مرتين في ملفات مختلفة تُعد مرشحًا قويًا لتصبح رمز سمة مسمى. أما القيمة التي تظهر مرة واحدة فلا مشكلة في إبقائها قيمة اعتباطية. والقيم التي تبدو وكأنها تنتمي إلى مقياس متسق (مثل w-[350px] وw-[360px] وw-[370px]) تشير إلى ضرورة توحيد نمط الاستخدام خارج المقياس.
# Find all arbitrary value usages in your project
grep -roh 'class="[^"]*\[[^\]]*\][^"]*"' src/ | sort | uniq -c | sort -rn
# Or more targeted: find classes with bracket notation
grep -roh '[a-z:-]*\[[^\]]*\]' src/ --include='*.{html,js,jsx,ts,tsx}' | sort | uniq -c | sort -rn
# Review high-count arbitrary values — add to theme if used 3+ timesدمج القيم الاعتباطية مع الأدوات
تتوافق القيم الاعتباطية طبيعيًا مع أصناف الأدوات القياسية في سلسلة الأصناف نفسها. يمكنك المزج بحرية بين أدوات المقياس والقيم الاعتباطية — وهذا مقصود، وليس حلًا مؤقتًا. يعالج نظام التصميم 95% من الحالات باستخدام أدوات المقياس، بينما تغطي القيم الاعتباطية نسبة 5% المتبقية.
يتمثل الانضباط الأساسي في استخدام أدوات المقياس أولًا، واللجوء إلى القيم الاعتباطية فقط عندما لا يوفر المقياس ما تحتاج إليه فعلًا. طبّق هذا الانضباط في مراجعة الشيفرة حتى لا تتحول العلامات إلى مجموعة من القيم الاعتباطية الخارجة عن المقياس.
<!-- Mixing utilities and arbitrary values naturally -->
<div class="flex items-center gap-4 px-6 py-3 <!-- scale utilities -->
w-[480px] <!-- arbitrary: specific width -->
bg-[#1a1a2e] <!-- arbitrary: brand color -->
rounded-xl shadow-lg <!-- scale utilities again -->
text-sm font-medium text-white">
A card using both
</div>اختبار سريع
اختبر مدى استيعابك لمفاهيم إتقان Tailwind CSS التي تناولها هذا الدرس.
مراجعة الدرس
تعلّمت في هذا الدرس أن القيم الاعتباطية تستخدم صيغة الأقواس [value] لتعيين أي قيمة CSS لأي أداة، بفضل التوليد عند الطلب في JIT؛ وأن كل قيمة اعتباطية فريدة تُولِّد قاعدة CSS فريدة، لذلك ينبغي نقل القيم المتكررة الخارجة عن المقياس بين الملفات إلى السمة؛ وأن الشرطات السفلية تمثّل المسافات داخل القيم الاعتباطية (مثل calc(100%_-_64px)). بهذا نختتم دورة JIT وتحسين الإنتاج — وسنستكشف بعد ذلك رموز التصميم ووضع السمات بطريقة منهجية.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «القيم الاعتباطية وتكلفتها» مجاني؟
نعم — نص درس «القيم الاعتباطية وتكلفتها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Tailwind CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «القيم الاعتباطية وتكلفتها»؟
استخدم صيغة الأقواس مثل w-[347px] للقيم المخصصة لمرة واحدة، وافهم المفاضلة بين المرونة واحتمال تضخم ملف تنسيق الأنماط. تتمرن على Tailwind CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Tailwind CSS Academy؟
لا تُشترط خبرة سابقة. Tailwind CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «القيم الاعتباطية وتكلفتها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Tailwind CSS Academy هذا؟
نعم. كل درس في Tailwind CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كيفية عمل محرّك JIT
- إدراج الفئات الديناميكية في القائمة الآمنة
- تحليل حجم الحزمة وتقليله
- القيم الاعتباطية وتكلفتها