Tailwind Playground
Тестируйте и предварительно просматривайте классы 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 и выше