This class accepts lots of values in tailwind CSS in which all the properties are covered as in class form. This class is used to create division between elements as a border. To achieve this CSS border-top-width property or CSS border-bottom-width property are used in CSS.
Divide Width Classes:
- divide-x: This class is used to set the x-axis divide.
- divide-x-reverse: This class is used to set the x-axis reverse divide.
- divide-y: This class is used to set the y-axis divide.
- divide-y-reverse: This class is used to set the y-axis reverse divide.
Note: The number of the divide-y-{amount} and divide-x-{amount} can be changeable from 0 to 8 with the span of 2.
Add borders between horizontal children: In this section, we want to borders between horizontal elements using the divide-x-{amount} utilities.
Syntax:
<element class="divide-x-{number}">...</element>Example:
<!DOCTYPE html> <html>
<head>
<link
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>
|
Output:
Add borders between vertical children: In this section, we want to divide borders between vertical elements using the divide-y-{amount} utilities.
Syntax:
<element class="divide-y-{number}">...</element>Example:
<!DOCTYPE html> <html>
<head>
<link
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>
|
Output:
Add borders between horizontal children: In this section, we want to ensure the border is added to the correct side of each element. For that, use flex-row-reverse or flex-col-reverse, then use the divide-x-reverse or divide-y-reverse.
Syntax:
<element class="divide-{axis}-reverse">...</element>Example:
<!DOCTYPE html> <html>
<head>
<link
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>
|
Output:
Divide Reverse Class