Magdy Atef Zahran

Tailwind مع الـ Forms (Input – Button – Select)

لما بنيجي نصمّم فورم أكتر 3 عناصر بنحتاجهم هم: Input – Button – Select.
Tailwind بيسهل علينا جدًا إننا نديهم ستايل نظيف وسريع من غير CSS إضافي.

1️⃣ الـ Input

العنصر الأساسي في أي فورم هو الـ Input.

شرح الكلاسات:

w-full = العرض ياخد مساحة الأب بالكامل
px-4 py-2 = Padding داخلي كويس
px-4 py-2 = Padding داخلي كويس
focus:outline-none = يشيل البوردر الأزرق الافتراضي
focus:ring-2 focus:ring-blue-500 = يعمل تأثير حلو وقت الفوكس

2️⃣ الـ Button

الزرار أهم عنصر تفاعلي. Tailwind يخليه ستايلش جدًا:

<button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition" > Submit </button>

ملاحظات:

bg-blue-600 text-white = لون خلفية أزرق + نص أبيض
hover:bg-blue-700 = لون أغمق عند مرور الماوس
transition = يخلي التغيير سلس وناعم

3️⃣ الـ Select

قائمة منسدلة نظيفة وسهلة التحكم.

<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" > <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

نفس فكرة الـ Input تقريبًا: حدود + فوكس ستايل

🛠️ دمج العناصر مع بعض

مثال على فورم كامل:

<form class="space-y-4 max-w-md mx-auto p-6 bg-gray-50 rounded-xl shadow"> <input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" /> <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" > <option>Frontend</option> <option>Backend</option> <option>Fullstack</option> </select> <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition" > Submit </button> </form>