زمین بازی 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:- ۶۴۰ پیکسل و بالاتر - •
md:- ۷۶۸ پیکسل و بالاتر - •
lg:- ۱۰۲۴ پیکسل و بالاتر - •
xl:- ۱۲۸۰ پیکسل و بالاتر