Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính đều được trình bày dưới dạng class. Đây là class stroke được áp dụng cho phần tử SVG. Trong CSS, ta sử dụng Stroke Property.
Stroke Classes (Các class Stroke):
- stroke-current: Class này dùng để đặt màu stroke của SVG thành màu văn bản hiện tại. Điều này giúp dễ dàng thiết lập màu stroke của một phần tử. Bạn có thể kết hợp class này với một tiện ích màu văn bản hiện có.
Syntax (Cú pháp):
<svg class="stroke-current">...</svg>
Example (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 Stroke Class</b>
<div class="bg-green-900 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="stroke-current text-red-600" cx="100"
cy="70" r="50" />
<circle class="stroke-current text-green-600" cx="250"
cy="70" r="50" />
<circle class="stroke-current text-blue-600" cx="400"
cy="70" r="50" />
<circle class="stroke-current text-yellow-600" cx="550"
cy="70" r="50" />
</svg>
</div>
</body>
</html>
Output (Kết quả):
