Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính đều được bao phủ dưới dạng class. Class này chỉ định liệu các phần tử có hiển thị với các sự kiện con trỏ hay không. Trong CSS, chúng ta thực hiện điều đó bằng thuộc tính CSS pointer-events property.
Các Class Pointer Events:
- pointer-events-none: Class này chỉ định rằng một phần tử không phản ứng với các sự kiện con trỏ.
- pointer-events-auto: Class này chỉ định rằng một phần tử phải phản ứng với các sự kiện con trỏ.
Cú pháp:
<element class="pointer-events-{behaviour}">...</element>
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 Pointer Events Class</b>
<div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
items-stretch
bg-green-200 border-solid border-4
border-green-900 gap-4">
<div class="pointer-events-auto bg-blue-600
w-full h-8 rounded-lg">
pointer-events-auto
</div>
<div class="pointer-events-none bg-green-600
w-full h-8 rounded-lg">
pointer-events-none
</div>
</div>
</body>
</html>
Đầu ra:
