Tailwind CSS - Divide Style

Previous
Quiz
Next

Tailwind CSS Divide Styles are predefined classes that allow you to easily set different styles for the lines that separate elements, including their width and style (such as solid, dashed, or dotted).

Tailwind CSS Divide Style Classes

Below is a list of Tailwind CSS Divide Style classes that control the appearance of the lines that separate elements.

Class CSS Properties
divide-solid border-style: solid;
divide-dashed border-style: dashed;
divide-dotted border-style: dotted;
divide-double border-style: double;
divide-none border-style: none;

Functionality of Tailwind CSS Divide Style Classes

  • divide-solid: Inserts a continuous line between elements.
  • divide-dashed: Inserts a line with dashes between elements.
  • divide-dotted: Inserts a line made up of dots between elements.
  • divide-double: Inserts two lines stacked between elements.
  • divide-none: Removes the line between elements.

Tailwind CSS Divide Style Class Examples

Below are examples of Tailwind CSS Divide Style classes showing different line styles such as solid, dashed, and dotted for separating elements.

Setting Different Vertical Divider Styles

This example shows how to use different Tailwind CSS divider styles classes to apply various vertical divider styles to paragraphs, lists, or any elements you want to divide vertically.

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 Styles
    </h2>
    <h3 class="font-bold underline mb-4">
        Applying Different Vertical Dividers
    </h3>
    <div class="space-y-4">
        <div class="divide-y-4 divide-solid divide-black">
            <p><strong>Solid divider</strong> example.</p>
            <p>Separates content with a solid line.</p>
        </div>

        <div class="divide-y-4 divide-dashed divide-black">
            <p><strong>Dashed divider</strong> example.</p>
            <p>Separates content with a dashed line.</p>
        </div>

        <div class="divide-y-4 divide-dotted divide-black">
            <p><strong>Dotted divider</strong> example.</p>
            <p>Separates content with a dotted line.</p>
        </div>

        <div class="divide-y-4 divide-double divide-black">
            <p><strong>Double divider</strong> example.</p>
            <p>Separates content with a double line.</p>
        </div>

        <div class="divide-y divide-none">
            <p><strong>No divider</strong> example.</p>
            <p>No line is used to separate the content.</p>
        </div>
    </div>
</body>

</html>

Changing Divider Styles on Hover

This example shows how to use Tailwind CSS Divider Classes to change divider styles on hover. It shows different divider styles that update when you hover over the elements.

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 Styles
    </h2>
    <h3 class="font-bold underline mb-2">
       Applying Hover Divider Styles with 4px Width
    </h3>
    <div class="divide-y-4 divide-dashed divide-green-500 
        hover:divide-dotted hover:divide-red-500 mb-4">
        <div>Dashed Divider - Hover to Change to Dotted Red</div>
        <div>Dashed Divider - Hover to Change to Dotted Red</div>
    </div>
    
    <div class="divide-y-4 divide-dotted divide-pink-600 
        hover:divide-solid hover:divide-blue-500 mb-4">
        <div>Dotted Divider - Hover to Change to Solid Blue</div>
        <div>Dotted Divider - Hover to Change to Solid Blue</div>
    </div>
    
    <div class="divide-y-4 divide-double 
        divide-yellow-500 hover:divide-none">
        <div>Double Divider - Hover to Remove Divider</div>
        <div>Double Divider - Hover to Remove Divider</div>
    </div>
</body>

</html>
Print Page
Previous
Next