Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính được trình bày dưới dạng class. Lớp này là một thuộc tính trình bày, dùng để đặt màu cho hình dạng SVG. Trong CSS, ta thực hiện điều đó bằng thuộc tính CSS fill.
Lớp Fill:
- fill-current: Lớp này được dùng để đặt màu fill của SVG thành màu văn bản hiện tại. Nó giúp dễ dàng đặt màu fill cho phần tử bằng cách kết hợp với tiện ích màu văn bản.
Cú pháp:
<svg class="fill-current">...</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 mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Fill Class</b>
<div class="bg-green-200 m-4 grid grid-flow-col gap-4 p-5">
<svg height="150px" width="600px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="fill-current text-red-600" cx="100"
cy="100" r="50" />
<circle class="fill-current text-green-600" cx="250"
cy="100" r="50" />
<circle class="fill-current text-blue-600" cx="400"
cy="100" r="50" />
<circle class="fill-current text-yellow-600" cx="550"
cy="100" r="50" />
</svg>
</div>
</body>
</html>
Đầu ra:
