Lớp này chấp nhận nhiều giá trị trong tailwind CSS, với các thuộc tính được bao phủ dưới dạng class. Sử dụng class này, ta có thể tô màu bất kỳ `ring-offset` nào. Trong CSS, ta thực hiện điều đó bằng thuộc tính CSS Color.
Các class màu Ring:
- ring-offset-transparent: Màu `ring-offset` sẽ trong suốt.
- ring-offset-current: Màu `ring-offset` sẽ phụ thuộc vào màu của phần tử cha.
- ring-offset-black: Màu `ring-offset` sẽ là màu đen.
- ring-offset-white: Màu `ring-offset` sẽ là màu trắng.
- ring-offset-gray-50: Màu `ring-offset` sẽ là màu xám.
- ring-offset-red-50: Màu `ring-offset` sẽ là màu đỏ.
- ring-offset-blue-50: Màu `ring-offset` sẽ là màu xanh lam.
- ring-offset-indigo-50: Màu `ring-offset` sẽ là màu chàm.
- ring-offset-purple-50: Màu `ring-offset` sẽ là màu tím.
- ring-offset-green-50: Màu `ring-offset` sẽ là màu xanh lá cây.
- ring-offset-yellow-50: Màu `ring-offset` sẽ là màu vàng.
- ring-offset-pink-50: Màu `ring-offset` sẽ là màu hồng.
Lưu ý: Giá trị màu có thể thay đổi theo nhu cầu từ 50-900. Khoảng cách giữa các giá trị nên là 100 sau 100.
Cú pháp:
<button class="ring-offset-{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">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Ring Offset Color Class</b>
<div class="mx-16 grid grid-cols-2 gap-6 p-2">
<button class="ring-4 ring-green-600 ring-offset-4
ring-offset-green-700 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
ring-offset-4 ring-offset-green-700
</button>
<button class="ring-4 ring-green-600 bg-green-400
ring-offset-4 ring-offset-yellow-700
ring-opacity-25 w-full h-12 rounded-lg">
ring-offset-4 ring-offset-yellow-700
</button>
</div>
</body>
</html>
Lưu ý: Hiện tại các trình duyệt chưa được hỗ trợ bởi Tailwind CSS Ring Width. Vì vậy, để xem kết quả, tôi chia sẻ liên kết đến (Tailwind CSS Playground).
