Horizontal Line Divider hr tag in tailwind CSS

Create a simple hr line divider using Tailwind CSS. Horizontal divider code tailwind CSS react js, web apps. Horizontal dividers are basically used for adding a border between the stacked children. This is helpful for list views and dividing the contents.

For horizontal divider class for hr divider and its color class is used as: divide-y divide-yellow-500

divide-y -> specifies horizontal divider

divide-yellow-500 -> gives color for the divider

 
<div class="grid grid-cols-1 divide-y divide-yellow-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Tailwind Horizontal line – Try Demo

Customizing size of Tailwind hr – horizonal divider

We can increase the size of the tailwind horizontal divider by adding size value like below:

  • divide-y-2
  • divide-y-4
  • divide-y-8

So here considering divide-y-8 – this will be adding border-bottom-width: 8px; to the style.

Another way to specify the size of horizontal divider hr in tailwind is to specify the pixel size in square brackets like:

divide-y-[3px]

Example Code:

<div class="grid grid-cols-1 divide-y-[3px] divide-blue-500 text-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Result:

Customizing size of Tailwind hr - horizonal divider

Custom size tailwind divider – Try Demo

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published.