Tailwind in React تنسيق Tailwind
آخر تحديث: 2026-11-03
Tailwind in React تنسيق Tailwind
Tailwind CSS إطار CSS ذرّي: يقسّم الأنماط إلى أصناف أدوات ذات غرض واحد تكتبها مباشرةً في className. وبالاقتران مع الدمج الشرطي، يتيح لك React التعبير عن نظام بصري كامل داخل JSX بلا تبديل ملفات، وبما أن محرّك JIT يولّد CSS فقط للأصناف التي تستخدمها فعليًا، يبقى الحزمة المُرسَلة صغيرة جدًا. والنتيجة نظام تصميم يفرضه المُترجِم نفسه.
| المجموعة | المنظومة والتقدّم |
|---|---|
| النوع | مكتبة |
| منذ الإصدار | v4 (رائج منذ 2025، يُوصَّل عبر إضافة Vite) |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
npm install tailwindcss @tailwindcss/vite
/* index.css — Tailwind v4 is imported with a single line */
@import "tailwindcss";
// Utilities go straight into className; conditional concatenation is the key trick
<div className={`px-4 py-2 rounded ${active ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}>
Button
</div>
// px-4 horizontal padding py-2 vertical padding rounded border radius bg-blue-600 blue background⚙️ المعاملات
| tailwind.config.js | ملف إعداد السمة في v3، حيث توسّع الألوان والتباعد والمتغيّرات المخصّصة؛ وفي v4 تُضبَط السمة داخل CSS عبر @theme. |
|---|---|
| @tailwindcss/vite plugin | الطريقة الموصى بها لوصل Tailwind بمشروع Vite: يفحص JSX لديك وقت البناء، ويستخرج أسماء الأصناف المستخدمة ويولّد ورقة الأنماط. |
القيمة المرجعة：لا قيمة مرتجعة — راجع المثال لاستخدام مكتبة الطرف الثالث.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
محاكاة: يطبع السطر العلوي سلسلة الأصناف المدمَجة كاملة بخط أحادي المسافة (الصنف الأساسي، وصنف المتغيّر، إضافةً إلى أداة opacity-50 المُلحَقة أثناء تعطيل الزر)؛ وأسفله زر بأسلوب Tailwind. والنقر على أزرار primary / danger / ghost يبدّل اللوحة اللونية، و Disable / Enable يوضّح الصنف الشرطي والمظهر شبه الشفاف. وأصناف Tailwind الحقيقية تحتاج ورقة الأنماط لتفعيلها، لذا تقوم الأنماط المضمّنة هنا مقامها.💡 النقاط الأساسية
💡 نصيحة حافظ على ترتيب كتابة ثابت — التخطيط، ثم التباعد، ثم اللون — كي يسهل قراءة كود الفريق؛ والترتيب ذاته لا يؤثر على الأولوية.
⚠️ تحذير لا يعمل دمج اسم صنف كامل ديناميكيًا (مثل `bg-${color}-600`) — فماسح JIT لا يرى اسم الصنف النهائي، لذا استخدم كائن بحث يربط المفتاح بالسلسلة الكاملة.
ℹ️ ملاحظة يمكن استخراج سلاسل أسماء الأصناف الطويلة المتكررة إلى كائن ثابت أو دالة مساعدة cn()/clsx بدل نسخها في كل مكان.
🏷️ المزيد من المنظومة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أتعامل مع className مفرط الطول؟
ج استخرج التوليفات الشائعة إلى كائن ثابت، أو ادمجها بدالة مساعدة cn()/clsx، أو لفّها في مكوّنات صغيرة. وأسماء الأصناف الطويلة هي الثمن الذاتي لوضع CSS داخل JSX، فحلّها بالتنظيم لا بالصياغة.
س لماذا لا تعمل أسماء الأصناف المدمَجة ديناميكيًا؟
ج إصدار Tailwind JIT يولّد CSS فقط لأسماء الأصناف التي تظهر كاملة في المصدر، لذا يبقى `bg-${color}-600` غير مرئي للماسح. اكتب خريطة مثل { red: 'bg-red-600', blue: 'bg-blue-600' } واختر اسم الصنف الكامل بالمفتاح.
س كيف أختار بين Tailwind ووحدات CSS؟
ج اختر Tailwind لسرعة التطوير ونظام تصميم موحّد؛ واختر وحدات CSS عندما تحتاج قوة CSS الكلاسيكية (حركات معقّدة، عناصر زائفة) معزلًا قويًا. ويمكن للاثنين التعايش في ذات المشروع.
