Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Divide Width

Quiz

Tailwind CSS Divide Width classes make it easy to set the width of lines that separate elements, helping to manage spacing and separation in your layout.

Tailwind CSS Divide Width Classes

Below is a list of Tailwind CSS Divider Width classes and properties that control the width of the lines separating nested elements within a container.

Class	CSS Properties
divide-x-0	border-right-width: 0px; border-left-width: 0px;
divide-x-2	border-right-width: 0px; border-left-width: 2px;
divide-x-4	border-right-width: 0px; border-left-width: 4px;
divide-x-8	border-right-width: 0px; border-left-width: 8px;
divide-x	border-right-width: 0px; border-left-width: 1px;
divide-y-0	border-top-width: 0px; border-bottom-width: 0px;
divide-y-2	border-top-width: 2px; border-bottom-width: 0px;
divide-y-4	border-top-width: 4px; border-bottom-width: 0px;
divide-y-8	border-top-width: 8px; border-bottom-width: 0px;
divide-y	border-top-width: 1px; border-bottom-width: 0px;
divide-y-reverse	--tw-divide-y-reverse: 1;
divide-x-reverse	--tw-divide-x-reverse: 1;

Functionality Of Tailwind CSS Divide Width Classes

divide-*-0: Removes the lines between child elements, making them invisible.
divide-*-2: Adds a thin line (2px) between child elements.
divide-*-4: Adds a medium line (4px) between child elements.
divide-*-8: Adds a thick line (8px) between child elements.
divide-*: Sets the width of the lines between child elements based on the specified value.
divide-*-reverse: Reverses the order of the lines between child elements.

Replace '*' with x for horizontal dividers or y for vertical dividers.

divide-x-reverse: Reverses the order of horizontal lines.
divide-y-reverse: Reverses the order of vertical lines.

Tailwind CSS Divide Width Class Examples

Below are examples of Tailwind CSS Divide Width classes, which allow us to set the width of dividers between elements, making it easy to control spacing and separation in layout.

Different Width Sizes Horizontal Divider

This example shows how to apply different horizontal divider widths using Tailwind CSS. The width of the dividers is adjusted using the divide-x-{size} classes, where the size determines the width of the horizontal dividers.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Divider Width
    </h2>
    <h3 class="font-bold underline mb-2">
       Horizontal Divider Width with Different Pixels
    </h3>
    <div class="space-y-4 mb-6">
        <ul class="flex divide-x-2 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">2px</li>
        </ul>
        <ul class="flex divide-x-4 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">4px</li>
        </ul>
        <ul class="flex divide-x-8 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">8px</li>
        </ul>
    </div>
</body>

</html>

Different Width Sizes Vertical Divider

This example shows how Tailwind CSS uses Divide Width classes to adjust the thickness of vertical dividers. By applying the divide-y-{sizes} classes, you can set different widths for these dividers, ranging from 1px to 8px.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
     <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Divider Width
    </h2>
    <h3 class="font-bold underline mb-4">
       Vertical  Divider Width with Different Pixels
    </h3>
    <div class="space-y-4">
        <div class="divide-y divide-black">
            <p>Divider width 1px</p>
            <p>1px top divider width.</p>
        </div>
        <div class="divide-y divide-y-2 divide-black">
            <p>Divider width 2px</p>
            <p>2px top divider width.</p>
        </div>
         <div class="divide-y divide-y-8 divide-black">
            <p>Divider width 8px</p>
            <p>8px top divider width.</p>
        </div>
    </div>
</body>

</html>

Vertical and Horizontal Divider Order Reversal

This example shows how to apply reverse divider classes to both horizontal and vertical dividers using Tailwind CSS. Use divide-x-reverse to reverse the order of horizontal dividers and divide-y-reverse to reverse the order of vertical dividers, changing their visual sequence.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
    Tailwind CSS Divider Width
    </h2>
    <div class="space-y-2">
        <h3 class="font-bold underline">
            Normal Horizontal Dividers
        </h3>
        <div class="flex divide-x divide-black">
            <div class="p-2">Item 1</div>
            <div class="p-2">Item 2</div>
            <div class="p-2">Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Reversed Horizontal Dividers
        </h3>
        <div class="flex divide-x divide-x-reverse 
            divide-black">
            <div class="p-2">Item 1</div>
            <div class="p-2">Item 2</div>
            <div class="p-2">Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Normal Vertical Dividers
        </h3>
        <div class="divide-y divide-black">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Reversed Vertical Dividers
        </h3>
        <div class="flex flex-col divide-y divide-y-reverse 
            divide-black">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div> 
    </div>
</body>

</html>

Print Page