Sân chơi Tailwind
Kiểm tra và xem trước các lớp Tailwind CSS trong thời gian thực.
Cài đặt
Cấu hình loại phần tử và nội dung
Các ví dụ cài đặt sẵn
Áp dụng nhanh các kết hợp kiểu thường dùng
Button
Card
Badge
Alert
Input
Xem trước
Xem kết quả đã được tạo kiểu trong thời gian thực
Xin chào, Tailwind!
HTML đã tạo
Mã HTML được tạo với các cài đặt hiện tại
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Xin chào, Tailwind!</div>
💡 Mẹo sử dụng
Các lớp phổ biến:
- •
hover:- Kiểu trạng thái di chuột - •
focus:- Kiểu trạng thái tiêu điểm - •
active:- Kiểu trạng thái hoạt động - •
transition-colors- Hiệu ứng chuyển đổi màu
Các lớp đáp ứng:
- •
sm:- 640px trở lên - •
md:- 768px trở lên - •
lg:- 1024px trở lên - •
xl:- 1280px trở lên