دليل Tailwind CSS الشامل للمبتدئين

ما هو Tailwind CSS؟

Tailwind CSS هو إطار عمل CSS يعتمد على مبدأ utility-first، حيث تبني تصميمك باستخدام classes مباشرة في HTML بدلاً من كتابة CSS مخصص.

لماذا Tailwind؟

• سرعة التطوير — لا تحتاج للتنقل بين ملفات HTML و CSS
• تناسق التصميم — نظام ألوان وأحجام موحد
• Responsive بسهولة — أضف sm: أو md: أو lg: قبل أي class
• حجم صغير — يزيل الـ CSS غير المستخدم تلقائياً

أمثلة عملية

زر احترافي

class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-colors"

بطاقة مع hover

class="p-6 rounded-2xl border border-slate-200 hover:shadow-lg hover:-translate-y-1 transition-all"

خطوات البداية

في Moparmeg، Tailwind CSS مدمج تلقائياً في كل مشروع تنشئه — لا تحتاج لأي إعداد!