📋 محتويات الصفحة
📖 الوصف
Tailwind CSS هو إطار عمل CSS يعمل على نهج "utility-first" بدلاً من كتابة CSS مخصص. بدلاً من كتابة فئات مثل `.card`، تستخدم فئات جاهزة مثل `bg-white rounded-lg shadow p-4`. يوفر تسريع كبير في التطوير وتصميم متناسق عبر المشروع. Tailwind يُولّد CSS مخصص بحجم صغير جداً في الإنتاج (فقط الأجزاء المستخدمة...
🎯 يستخدم في
مجالات استخدام هذه الأداة
بناء واجهات مستخدم سريعة
تصميم أنظمة موحدة (Design Systems)
مشاريع React/Vue/Svelte
Styling مع component-based frameworks
أي مشروع حديث يحتاج CSS سريع
✨ المميزات
أبرز مميزات هذه الأداة
Utility-first approach (تطوير سريع)
حجم CSS صغير جداً في الإنتاج (~10KB)
JIT compilation (فقط ما تستخدم)
Dark mode مدمج
Responsive design بسيط (sm:
md:
lg:)
Plugins وcustomization واسعة
Tailwind UI (مكونات جاهزة)
متوافق مع جميع frameworks
⚠️ العيوب
نقاط يجب مراعاتها
HTML مزدحم بكثير من الفئات
يحتاج تعلم أسماء الـ utilities
أقل من separation of concerns
قد يكون مبالغاً فيه للمشاريع الصغيرة
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!-- Card -->
<div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
<h2 class="text-2xl font-bold text-gray-900 mb-2">عنوان البطاقة</h2>
<p class="text-gray-600 mb-4">محتوى البطاقة هنا</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
اضغط هنا
</button>
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-4 bg-gray-100 rounded">عنصر 1</div>
<div class="p-4 bg-gray-100 rounded">عنصر 2</div>
<div class="p-4 bg-gray-100 rounded">عنصر 3</div>
</div>
<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
يتغير تلقائياً في الوضع المظلم
</div>📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS Modules
⭐نهج scoped CSS (Scoped CSS Methodology)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Less
معالج CSS (CSS Preprocessor)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)