لحد الان إحنا غطينا كل حاجة في Tailwind:
- عدينا على الأساسيات خطوة بخطوة.
- دخلنا في دمج Tailwind مع الـ ecosystem
- وصلنا للمستوى المتقدم واتكلمنا عن الأداء والتنظيم والـ JIT.
- دلوقتي إنت مش بس عارف Tailwind… إنت وصلت لمرحلة إنك توظفه لخدمتك وتخليه يشتغل لصالحك مش العكس.
قبل ما نخش على المرحلة الأخيرة (المشاريع العملية)، لازم ناخد وقفة سريعة مع شوية Tricks & Tips عالية المستوى. الحاجات دي هتخليك أسرع، أذكى، وانتاجيتك هتطير لفوق حرفيا…
1. استخدم الـ @apply بذكاء
- بدل ما تكتب نفس الـ utilities 10 مرات، اعمل class جاهزة:
- كده أي Button تستخدمه عندك consistent وسهل التعديل
2. استغل الـ Extract Components
لو عندك UI element متكرر (Card, Badge, Input…)، اعمله React/Vue Component وخلي الـ classes بتاعة Tailwind جواه.
- ده بيخلي الكود Organized
- بيخلي أي تعديل يتطبق على كل مكان مرة واحدة
3. الـ Variants المخصصة
- ممكن تضيف Variants خاصة في
tailwind.config.js
مثال: عاوز تعمل group-focus variant:
- كده تقدر تعمل استهداف أدق وأسرع بدل CSS عادي
4. استعمل الـ IntelliSense
لو بتشتغل VSCode، نزّل Tailwind CSS IntelliSense:
- Auto-complete لكل الـ classes
- Preview للألوان مباشرة.
- Linting لو كتبت class مش موجودة.
5. Pre-Built Components
في مواقع جاهزة زي:
- (TailwindUI)
- (Flowbite)
- (DaisyUI)
6. استغل الـ Shortcuts
- Responsive once: اكتب كل breakpoints في نفس السطر:
- Dark mode toggle سريع: خليها
classبدلmediaفي config، عشان تقدر تعمل:
وتتحكم بالـ class dark في <html>
7. خليك Modular
لو مشروع كبير:
- اعمل
partialsللـ CSS (مثلاً ملف خاص بالـ forms, ملف خاص بالـ buttons). - اعمل Config theme خاص بكل Project (ألوان, Spacing, Fonts)
- متنساش تستخدم الـ
extendعشان متكسرش الـ defaults
8. Tricks سريعة
- جرب Class Sorting (زي Prettier plugin لـ Tailwind) يخلي الكود منظم تلقائي
- استعمل
aspect-ratioplugin في الصور والفيديوهات عشان تمنع مشاكل الـ responsive. - دايمًا راجع الـ Production build بتاعك… Tailwind مع الـ JIT بيخلي CSS صغير جدًا لكن لازم تتأكد
المشاركة مع أصدقائك
قسم التعليقات