Lớp này chấp nhận nhiều giá trị trong tailwind CSS, nơi tất cả thuộc tính được bao phủ dưới dạng class. Lớp này dùng để cải thiện khả năng truy cập với trình đọc màn hình.
Các class cho Screen Readers:
- sr-only: Class này dùng để ẩn một phần tử trực quan, nhưng không ẩn khỏi trình đọc màn hình.
- not-sr-only: Class này được dùng để hoàn tác hiệu ứng của class sr-only.
Cú pháp:
<svg class="sr-only|not-sr-only">...</svg>
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">
<center>
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Screen Readers Class</b>
<div class="bg-green-200 p-4 mx-16 space-y-4">
<span class="sr-only">sr-only</span>
<span class="not-sr-only">not-sr-only</span>
</div>
</center>
</body>
</html>
Kết quả:
