الـ CSS العادي كلنا اشتغلنا بيه… بتكتب كلاس في ملف .css وتستدعيه في الكومبوننت أو الصفحة. الموضوع بسيط في الأول، بس كل ما المشروع يكبر بتبدأ المشاكل:
تكرار في الكود- صعوبة في تنظيم الـ Styles
- تضارب في الكلاسات
- وتلاقي نفسك عامل ملفات ضخمة ومش قادر تسيطر عليها
هنا بييجي دور Tailwind CSS
Tailwind مش Framework زي Bootstrap، ومش Library فيها Components جاهزة.
هو Utility-First CSS Framework.. يعني إيه؟
يعني بدل ما تكتب كود CSS من الصفر وتدي اسم كلاس (مثلاً .btn-primary)، بتستعمل Utility Classes جاهزة زي:
الكود ده بيديك زرار أزرق جاهز من غير ما تكتب سطر CSS واحد.
ليه Tailwind بيوفر وقتك؟
- سرعة التطوير: مش بتفتح ملف CSS تاني… كل حاجة بتكتبها Inline.
- مفيش تكرار: بدل ما تكتب نفس الـ Styles كل مرة، بتجمع Utilities.
- Consistency: ألوان وخطوط وأحجام موحدة عشان Tailwind بيبنيها من Config واحد.
- قابلية التخصيص : عندك
tailwind.config.js، تغير فيه ألوان البراند أو الـ Spacing أو أي حاجة… وكل المشروع يتحدث أوتوماتيك. - الأداء: Tailwind بيشيل أي Class مش مستخدم (بـ PurgeCSS)، يعني الـ CSS النهائي صغير جدًا
طب ليه Tailwind بدل CSS العادي؟
-
في CSS العادي:
- هتضطر تسمي كلاسات لكل عنصر.
- صعوبة في التعديل السريع.
- مفيش Design System موحد إلا لو بنيته بنفسك.
-
في Tailwind:
- كله جاهز كـ Utility.
- تعديلاتك أسرع بكتير.
- عندك System جاهز بس مرن 100%
📌 الخلاصة:
Tailwind مش بيلغي الـ CSS هو بيسهل عليك كتابته ويخليك تركز في الـ UI بدل ما تضيع وقت في الـ Naming والـ Duplication.
وده السبب اللي خلى أغلب المشاريع الكبيرة والـ Startups تستخدمه كـ Standard.
المشاركة مع أصدقائك
قسم التعليقات