Tailwind CSS • المستوى الأول • الدرس 1

مقدمة وإعداد Tailwind CSS وتأثيث الألوان (Setup & Colors)

أهداف الدرس

فهم مفهوم فلسفة Utility-First التي تلغي كتابة CSS تقليدية منفصلة.
استخدام كلاسات الخلفيات والنصوص مثل bg-slate-900 و text-sky-400.
تطبيق التنسيقات التفاعلية مثل hover: و transition-all.
بناء تخطيطات باستخدام Flexbox عبر flex و gap-3.

1. ما هي مكتبة Tailwind CSS؟

هي إطار عمل CSS يمنحك كلاسات مساعدة جاهزة مباشرة داخل الـ HTML الخاص بك، مما يمنحك سرعة فائقة في البناء والتخصيص بدون مغادرة ملفات المكونات.

html

<!-- مثال: تنسيق بطاقة كاملة بـ 6 كلاسات فقط -->
<div class="bg-white p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-800">
    عنوان البطاقة
  </h2>
  <p class="text-gray-600 mt-2">وصف قصير للبطاقة.</p>
</div>

<!-- بدلاً من كتابة ملف CSS كامل + ربطه بالكلاسات -->

2. تشريح الكلاسات الأساسية

الألوان

bg-slate-900 — خلفية داكنة
text-sky-400 — نص سماوي
bg-emerald-500 — خلفية زمردية

المسافات والأبعاد

p-6 — حشوة داخلية
mt-4 — هامش أعلى
px-4 py-2 — حشوة أفقية ورأسية

التأثيرات

rounded-2xl — زوايا دائرية
shadow-xl — ظل قوي
transition-all — انتقال ناعم

التفاعل

hover:bg-sky-600 — عند التمرير
focus:ring-2 — عند التركيز
active:scale-95 — عند الضغط

3. لماذا Tailwind أفضل من CSS التقليدي؟

سرعة التطوير

لا تنتقل بين ملفين (HTML + CSS) — كل شيء في مكان واحد.

حجم أصغر

فقط الكلاسات المستخدمة تُضاف إلى ملف الإنتاج النهائي.

تناسق تلقائي

نظام موحد للمسافات والألوان — لا قرارات عشوائية.

التطبيق العملي المباشر

تحدي الدرس الأول: بناء زرين تفاعليين

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر لون خلفية الزر الأساسي من bg-sky-500 إلى bg-emerald-500.
غيّر لون الـ hover من hover:bg-sky-600 إلى hover:bg-emerald-600.
أضف زراً ثانياً باسم "إلغاء" بلون رمادي bg-slate-700 مع hover:bg-slate-600.
غلّف الزرين في <div class="mt-4 flex gap-3"> لترتيبهما بجانب بعض.
أضف فقرة أسفلهما بلون text-emerald-400 وصف صغير text-sm.

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى الانتقال للدرس الثاني