Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm các thuộc tính dưới dạng class. Class này dùng để tạo khoảng cách giữa các phần tử như đường viền. Để làm điều này CSS border-top-width property hoặc CSS border-bottom-width property được sử dụng.
Các Class Chiều Rộng Phần Chia:
- divide-x: Class này dùng để thiết lập phần chia theo trục x.
- divide-x-reverse: Class này dùng để thiết lập phần chia ngược theo trục x.
- divide-y: Class này dùng để thiết lập phần chia theo trục y.
- divide-y-reverse: Class này dùng để thiết lập phần chia ngược theo trục y.
Lưu ý: Số lượng của divide-y-{amount} và divide-x-{amount} có thể thay đổi từ 0 đến 8 với bước nhảy 2.
Thêm đường viền giữa các phần tử con nằm ngang: Trong phần này ta muốn tạo đường viền giữa các phần tử ngang dùng divide-x-{amount}.
Cú pháp:
<element class="divide-x-{number}">...</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 Width Class</b>
<div class="mx-4 bg-green-200 p-2">
<div class="grid grid-cols-3 divide-x-4
divide-green-500">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
</div>
</body>
</html>
Kết quả:
Thêm đường viền giữa các phần tử con dọc: Trong phần này ta muốn chia đường viền giữa các phần tử dọc dùng divide-y-{amount}.
Cú pháp:
<element class="divide-y-{number}">...</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 Width Class</b>
<div class="mx-4 bg-green-200 p-2">
<div class="grid grid-cols-1 divide-y-4
divide-green-500">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
</div>
</body>
</html>
Kết quả:
Thêm đường viền giữa các phần tử con nằm ngang: Trong phần này, ta muốn đảm bảo đường viền được thêm đúng bên của mỗi phần tử. Để làm điều đó, dùng flex-row-reverse hoặc flex-col-reverse, sau đó dùng divide-x-reverse hoặc divide-y-reverse.
Cú pháp:
<element class="divide-{axis}-reverse">...</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 Width Class</b>
<div class="mx-4 bg-green-200 p-2">
<div class="flex flex-col-reverse divide-y-4
divide-y-reverse divide-green-500">
<div>GeeksforGeeks</div>
<div>A Computer Science Portal</div>
<div>For Geeks</div>
</div>
</div>
</body>
</html>
Kết quả:
