جاري التحميل...
جاري التحميل...
فلسفة Utility-First، لماذا فاز Tailwind، كيف يعمل تحت الكواليس
Tailwind CSS هو إطار عمل CSS يعتمد على الفئات المساعدة — يوفر لك مجموعة من الفئات المصغرة الجاهزة للاستخدام يمكنك دمجها مباشرة في عناصر HTML لتصميم واجهات المستخدم بسرعة وكفاءة.
💡 حقائق سريعة عن Tailwind CSS:
أنشأه Adam Wathan كمشروع مفتوح المصدر. الإصدار الحالي: v4 الذي يستخدم تكوين CSS أولاً بدلاً من ملفات JavaScript التقليدية. الفلسفة: الفئات المساعدة — فئات صغيرة مخصصة لكل خاصية CSS. وهو أحد أكثر أطر عمل CSS استخداماً في المشاريع الحديثة.
في الإصدار 4 (v4)، لم يعد Tailwind يحتاج إلى ملف tailwind.config.js تقليدي. بدلاً من ذلك، يمكنك تكوين الإطار مباشرة من ملف CSS باستخدام التوجيه @theme.
لفهم لماذا اختار مطورو Tailwind نموذج الفئات المساعدة أولاً، لنلقي نظرة على المشكلة التي يواجهها المطورون مع النهج التقليدي:
في المشاريع الكبيرة، تصبح ملفات CSS من المستحيل تقريباً إدارتها. مع Tailwind، يعيش التصميم بالكامل في ملف واحد — ملف المكون نفسه.
💡 ملاحظة هامة:
قد يبدو الكود أطول قليلاً في HTML، لكن الفائدة هي أنك لا تحتاج أبداً إلى فتح ملف CSS وإنشاء فئة جديدة والانتظار حتى يكتمل البناء. كل ما تحتاجه أمامك — ولهياكل الإنتاج، يزيل Tailwind الفئات غير المستخدمة تلقائياً.
لنشئ بطاقة بسيطة باستخدام Tailwind فقط. لاحظ كيف ندمج الفئات لتحقيق تصميم احترافي.
ما هو النوع الأساسي لـ Tailwind CSS؟
ما هو التغيير الأكبر في Tailwind v4 مقارنة بالإصدارات السابقة؟
ماذا يفعل مترجم JIT في Tailwind؟
ما هو النمط الصحيح لكتابة فئة Tailwind للحصول على حشو 2rem؟
أنشئ مكون React يعرض ملفاً شخصياً باستخدام Tailwind CSS فقط (بدون CSS مخصص). يجب أن تتضمن البطاقة: صورة أفاتار دائرية، اسم المستخدم، نبذة شخصية، زر 'متابعة', تأثير hover، وتصميم متجاوب.
الحل:
function ProfileCard() {
return (
<div className="
flex flex-col md:flex-row items-center gap-6
bg-white dark:bg-gray-800
rounded-2xl shadow-lg p-6
hover:shadow-xl hover:scale-[1.02]
transition-all duration-300
max-w-md md:max-w-lg mx-auto
">
<img
src="/avatar.jpg"
alt="User"
className="
w-24 h-24 rounded-full object-cover
border-4 border-indigo-500
"
/>
<div className="text-center md:text-right">
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
Ahmed
</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm mb-3">
Frontend Developer
</p>
<button className="
bg-indigo-600 hover:bg-indigo-700
text-white font-medium
px-6 py-2 rounded-full
transition-colors duration-200
text-sm
">
Follow
</button>
</div>
</div>
);
}أنشئ مكون بطاقة ملف شخصي باستخدام Tailwind CSS فقط:
💡 استخدم flex-col md:flex-row للتخطيط المتجاوب، و rounded-full للأفاتار الدائري، و transition-colors لتأثيرات التمرير السلسة.
التخطيط:
التباعد:
الألوان:
الطباعة:
الحدود وأنصاف الأقطار:
المتجاوب:
ما هو Tailwind CSS؟
الإجابة:
مكتبة CSS utility-first تسمح بتنسيق العناصر مباشرة في HTML/JSX.
لماذا Tailwind بدلاً من CSS عادي؟
الإجابة:
أسرع في التطوير، أصغر حجماً عند الإنتاج، و Consistent.
استخدم VS Code Extension
Tailwind CSS IntelliSense يُكمل الأسماء تلقائياً