Skip to content
Related Articles

Related Articles

Tailwind CSS Divide Width
  • Last Updated : 25 Feb, 2021

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :