Lớp này chấp nhận nhiều giá trị trong tailwind CSS, với các thuộc tính dưới dạng class. Sử dụng class này, ta có thể đặt kiểu đường phân chia cho bất kỳ phần tử nào.
Các Class Kiểu Đường Phân Chia:
- divide-solid: Class này dùng để thiết lập class divide ở dạng solid.
- divide-dashed: Class này dùng để thiết lập class divide ở dạng dashed.
- divide-dotted: Class này dùng để thiết lập class divide ở dạng dotted.
- divide-double: Class này dùng để thiết lập class divide ở dạng double.
- divide-none: Class này được sử dụng khi không có đường divide.
Cú pháp:
<element class="divide-{style}">...</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 Divide Style Class</b>
<div class="mx-4 bg-green-200 p-2">
<div class="grid grid-cols-3 divide-x-4
divide-pink-500 divide-dashed">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
<br>
<div class="grid grid-cols-3 divide-x-4
divide-yellow-500 divide-solid">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
<br>
<div class="grid grid-cols-3 divide-x-4
divide-gray-500 divide-double">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
<br>
<div class="grid grid-cols-3 divide-x-4
divide-red-500 divide-dotted">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
</div>
</body>
</html>
Kết quả:
