Html tailwindcss add border to li tag-CodePudding

I am using tailwindcss to create a side menu and I need some active indicator so I need to show the border at end of <li> tag.

Right now its showing like this:

 <div >
    <aside >
        <ul >
            <li>
                <div >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                        stroke="currentColor" >
                        <path strokeLinecap="round" strokeLinejoin="round"
                            d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                    </svg>
                </div>
            </li>
        </ul>
    </aside>
</div>

I want to do it like this

CodePudding user response：

You can simple add this few classes: to <li> tag : pr-2 border-black border-r-2

padding right
border black
border on the right side

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <h1 >
    Hello world!
  </h1>

  <div >
    <aside >
      <ul >
        <li >
          <div >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" >
              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
          </div>
        </li>
      </ul>
    </aside>
  </div>
</body>

</html>

CodePudding user response：

To apply the right border to the element in the tailwind by using the "border-r-2" class and also more classes with border variants like "border-r-4", "border-r-8" etc.

In your case, you have to apply "border-r-2" to <li> elements like

<li >

Hear the value "2" indicate border width,

For more information regarding the same here you can find the reference https://tailwindcss.com/docs/border-width