Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính được bao phủ dưới dạng class. Class này được dùng để thiết lập độ rộng của vòng cho button.
Các Class Độ Rộng Vòng:
- *: Class này dùng để thiết lập box-shadow 0 0 #000.
- ring: Class này được sử dụng để thiết lập vòng.
- ring-0: Class này định nghĩa không có vòng.
- ring-1: Vòng mỏng nhất được tạo bằng cách sử dụng class này.
- ring-2: Class này dùng để tạo vòng trung bình xung quanh button.
- ring-4: Class này dùng để tạo vòng lớn xung quanh button.
- ring-8: Class này dùng để tạo vòng rộng nhất xung quanh button.
- ring-inset: Class này dùng để tạo vòng bên trong, tương tự padding.
ring: Class này dùng để áp dụng box-shadow liền nét với độ dày cụ thể cho phần tử. Các vòng này có màu xanh lam bán trong suốt mặc định.
Cú pháp:
<button class="ring-{number}">...</button >
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https: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 Width Class</b>
<div class="mx-16 grid grid-cols-5 gap-2 p-2">
<button class="ring-0 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-0
</button>
<button class="ring-1 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-1
</button>
<button class="ring-2 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-2
</button>
<button class="ring-4 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-8 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-8
</button>
</div>
</body>
</html>
Lưu ý: Hiện tại các trình duyệt chưa được Tailwind CSS Ring Width hỗ trợ. Vì vậy, tôi chia sẻ link output (Tailwind CSS Playground).
ring-inset: Class này được dùng để tạo vòng bên trong, tương tự như padding hoạt động trên mọi phần tử.
Cú pháp:
<button class="ring-inset">...</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 Width Class</b>
<div class="mx-16 grid grid-cols-5 gap-2 p-2">
<button class="ring-4 ring-green-600 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-green-600 ring-inset
bg-green-400 ring-opacity-25 w-full h-12 rounded-lg">
ring-inset
</button>
</div>
</body>
</html>
