Tailwind CSS Divide Width

23 Mar, 2022
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:
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>
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:
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>
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:
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>
Output:
Divide Reverse Class
Tailwind CSS
Tailwind-Borders
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.