ملعب Tailwind
اختبار ومعاينة فئات Tailwind CSS في الوقت الفعلي.
الإعدادات
تكوين نوع العنصر والمحتوى
أمثلة جاهزة
تطبيق سريع لمجموعات أنماط شائعة الاستخدام
Button
Card
Badge
Alert
Input
معاينة
مشاهدة النتيجة المنسقة في الوقت الفعلي
مرحبا، Tailwind!
HTML المُولد
كود HTML المُولد بالإعدادات الحالية
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">مرحبا، Tailwind!</div>
💡 نصائح الاستخدام
الفئات الشائعة:
- •
hover:- أنماط حالة التمرير - •
focus:- أنماط حالة التركيز - •
active:- أنماط حالة النشاط - •
transition-colors- تأثيرات انتقال الألوان
الفئات المتجاوبة:
- •
sm:- 640px وأعلى - •
md:- 768px وأعلى - •
lg:- 1024px وأعلى - •
xl:- 1280px وأعلى