لو جربت تضيف استايل مختلف لما تمررالماوس أو لما تضفط على زر زمان كنت بتكتب CSS زي:
في Tailwind الموضوع أبسط بكتير:
بتكتب البادئة (prefix) زي hover: أو focus: قبل الكلاس نفسه 👇
Hover
لما المؤشر يقف على العنصر:
- عادي = أزرق فاتح
- عند الـ hover = أزرق غامق
Focus
لما العنصر (زي input) يكون متفاعل أو واخد “focus”:
- عادي = رمادي
- عند الكتابة = الأزرق بيظهر مع ring
Active
لما تدوس على العنصر نفسه:
- عادي = أخضر فاتح
- أثناء الضغط = أخضر غامق
Group
بتخلي عناصر جوة عنصر parent تتأثر لو الـ parent نفسه اتعمله hover
عند hover على الصندوق كله = العنوان بيتلون أزرق.
Peer
بتخلي عنصر يتأثر بحالة عنصر تاني “أخوه”.
مثال: لو input فيه خطأ = الـ label يتغير.
- لما تعمل check = النص يبقى أخضر ✅
🧩 الخلاصة
الـ Pseudo Classes في Tailwind بتخليك تبني interactivity كاملة من غير سطر CSS خارجي.
مجرد إنك تستخدم الـ prefixes زي:
- hover:
- focus:
- active:
- group-hover:
- peer-checked:
هتقدر تعمل UI ديناميكي وسلس بسهولة جدا
المشاركة مع أصدقائك
قسم التعليقات