Open In App

Tailwind CSS Divide Width

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads