Magdy Atef Zahran

استراتيجيات تنظيم الكود مع Component-Driven Styling في Tailwind

لما مشروعك يكبر استخدام Tailwind Utility Classes في كل مكان ممكن يخلي الكود شكله “مكركب”. هنا ييجي دور Component-Driven Styling: إنك تبني الـ UI على هيئة Components منظمة، وتعيد استخدام الستايلات بدل ما تعيد كتابتها كل مرة.

الفكرة الأساسية

بدل ما تكتب نفس الـ utilities لكل زرار أو كارت أو فورم، تقدر:

تعمل React/Vue Components جاهزة
تعرّف Custom Classes باستخدام @apply.
تبني نظام Design System صغير جوه مشروعك

🔹 مثال: زرار Button

// Button.jsx<br /><br /> export default function Button({ children }) {<br /><br /> return (<br /><br /> <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"><br /><br /> {children}<br /><br /> </button><br /><br /> );<br /><br /> }

دلوقتي بدل ما تكتب utilities في كل مرة، مجرد تستخدم <Button>Click</Button>

🔹 استخدام @apply مع Tailwind

في ملف CSS بتاعك:

.btn-primary {<br /><br /> @apply px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition;<br /><br /> }</p><br /> <p>.btn-secondary {<br /><br /> @apply px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition;<br /><br /> }

وبعدين تستخدمهم:

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

🔹 بناء UI Components أكبر

مثلاً Card Component:

function Card({ title, children }) {<br /><br /> return (<br /><br /> <div className="p-6 bg-white rounded-2xl shadow-md"><br /><br /> <h2 className="text-lg font-bold mb-4">{title}</h2><br /><br /> <div>{children}</div><br /><br /> </div><br /><br /> );<br /><br /> }

كده أي “كارد” في المشروع عنده نفس الشكل والستايل متماسك.

🎯 الفائدة من Component-Driven Styling

تنظيم الكود – مفيش تكرار عشوائي للـ classes.
سهولة الصيانة – لو غيرت شكل الزرار، بيتعدل في كل مكان.
تناسق التصميم – المشروع كله يبان إنه معمول بنظام واحد.
سرعة التطوير – بدل ما تعيد نفس utilities مئات المرات

الخلاصه…

Tailwind مش ضد الـ Components، بالعكس هو بيساعدك تبني Component-Driven UI منظم وسريع.
الفكرة إنك تبدأ بالـ utilities، ولما تلاحظ تكرار – حوّله لـ Component أو Class جاهزة.