Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính được trình bày dưới dạng class. Class này dùng để thiết lập độ rộng *ring-offset* của nút.
Các class Ring Offset Width:
- ring-offset-0: Class này dùng để bỏ ring-offset.
- ring-offset-1: Class này dùng để thiết lập ring-offset nhỏ nhất.
- ring-offset-2: Class này dùng để thiết lập ring-offset trung bình.
- ring-offset-4: Class này dùng để thiết lập ring-offset lớn.
- ring-offset-8: Class này dùng để thiết lập ring-offset lớn nhất.
Lưu ý: Hiện tại các trình duyệt chưa hỗ trợ Tailwind CSS Ring Width. Để xem kết quả, tôi chia sẻ link Tailwind CSS Playground.
Cú pháp:
<button class="ring-offset-{width}">...</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 Width 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>
Đầu ra:
