Lớp này chấp nhận nhiều giá trị trong tailwind CSS, các thuộc tính được bao phủ dưới dạng class. Sử dụng class này, bạn có thể tô màu bất kỳ vòng nào. Trong CSS, chúng ta thực hiện bằng CSS Color property.
Các class Ring Color:
- ring-transparent: Màu của vòng sẽ trong suốt.
- ring-current: Màu của vòng phụ thuộc vào màu của phần tử cha.
- ring-black: Màu của vòng sẽ là màu đen.
- ring-white: Màu của vòng sẽ là màu trắng.
- ring-gray-50: Màu của vòng sẽ là màu xám.
- ring-red-50: Màu của vòng sẽ là màu đỏ.
- ring-blue-50: Màu của vòng sẽ là màu xanh lam.
- ring-indigo-50: Màu của vòng sẽ là màu chàm.
- ring-purple-50: Màu của vòng sẽ là màu tím.
- ring-green-50: Màu của vòng sẽ là màu xanh lá cây.
- ring-yellow-50: Màu của vòng sẽ là màu vàng.
- ring-pink-50: Màu của vòng sẽ là màu hồng.
Lưu ý: Giá trị màu có thể thay đổi từ 50-900 theo nhu cầu của bạn. Khoảng cách nên là 100.
Cú pháp:
<button class="ring-{color}">...</button >
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<div class="mx-16 grid grid-cols-5 gap-4 p-2">
<button class="ring-4 ring-red-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-green-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-blue-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-yellow-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-pink-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
</div>
</body>
</html>
Lưu ý: Hiện tại các trình duyệt không được hỗ trợ bởi Tailwind CSS Ring Color. Vì vậy, tôi chia sẻ liên kết kết quả (Tailwind CSS Playground).
Đầu ra:
