Lớp này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm tất cả thuộc tính dưới dạng class. Chúng ta có thể thiết lập độ mờ của chữ bằng class này. Trong CSS, ta dùng thuộc tính CSS Opacity để làm việc đó.
Độ mờ chữ (Text Opacity):
- text-opacity-0: Kiểm soát độ mờ của placeholder sử dụng các tiện ích text-opacity-{amount}.
Lưu ý: Giá trị opacity có thể thay đổi từ 0 đến 100 với bước nhảy 5.
Cú pháp:
<element class="text-{opacity}">...</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 mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Text Opacity Class</b>
<div class="mx-14 bg-green-200 grid grid-rows-4
grid-flow-col text-justify p-4">
<p class="text-green-800 text-opacity-100 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-green-800 text-opacity-75 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-green-800 text-opacity-50 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-green-800 text-opacity-25 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-yellow-800 text-opacity-100 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-yellow-800 text-opacity-75 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-yellow-800 text-opacity-50 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-yellow-800 text-opacity-25 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-pink-800 text-opacity-100 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-pink-800 text-opacity-75 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-pink-800 text-opacity-50 p-2">
A Computer Science Portal for Geeks
</p>
<p class="text-pink-800 text-opacity-25 p-2">
A Computer Science Portal for Geeks
</p>
</div>
</body>
</html>
Kết quả:
