Magdy Atef Zahran

إعادة استخدام الـ Styles مع @apply في Tailwind

لما بتشتغل بـ Tailwind فترة هتلاحظ إنك ساعات بتكرر نفس الكلاسات في كذا مكان.
مثلاً كل Button بتعمله بيبقى فيه نفس الشكل: ألوان – Padding – Border – Hover … وهكذا.

هنا ييجي دور @apply
الميزة دي بتخليك تجمع كلاسات Tailwind وتعيد استخدامها كأنها كلاس واحد فقط.

إزاي نستخدم @apply؟

بتتكتب جوه ملف CSS عادي (زي globals.css) بالشكل دا:

/* ملف globals.css */ .btn-primary { @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700; } .btn-secondary { @apply px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300; }

وبعد كدا تقدر تستخدمهم في أي HTML أو React:

<button class="btn-primary">Save</button> <button class="btn-secondary">Cancel</button>

ليه نستخدم @apply؟

بيقلل التكرار مش هتكتب 6-7 كلاسات كل مرة
يخلي الكود أوضح وأسهل في الصيانة
ينفع تبني Design System صغير جوا مشروعك (زي Buttons, Cards, Alerts…).

مثال تاني (Card Component):

.card { @apply p-6 bg-white rounded-2xl shadow-md; } .card-title { @apply text-xl font-bold mb-2; } .card-text { @apply text-gray-600; }

<div class="card"> <h2 class="card-title">Welcome!</h2> <p class="card-text">This is a reusable card component.</p> </div>

الخلاصة…

@apply هو جسر ما بين الـ Utility-first mindset و إعادة استخدام الـ Styles…. بيخليك تستفيد من قوة Tailwind + تحافظ على كود نظيف وقابل للتوسع