Tailwind css border issue [closed]

Question

I'm trying to create a border with a specific horizontal length by using border-b-8 in tailwind css but it's not working. Instead, the border-b-8 affects the thickness of the border but not the horizontal length.

Here is my code:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<h2 class="text-blue-500 sm:text-3xl border-b-8 font-semibold pt-8 mb-4 bd"> My Skills </h2>

How do I do this?

Answer 1

the tailwind border classes only affect the thickness or style of the border. The width is determined by the width of the container that the border is applied to.

You could do something like:

<h2 class="w-1/2 border-b-2"> My Skills </h2>

In this example the border will take on the width of the container, which is set to w-1/2 which is 50%

Answer 2

I was able to do this with Tailwind alone by using an empty div under the actual div which contains the text and placing these two inside a parent div that has flex flex-col class.

Example React code:

<div className='flex flex-col'>
    <div className='py-1 px-3 mx-1 font-bold text-sm text-black'>
        {props.children}
    </div>
    {props.active ? <div className='w-1/2 transform translate-x-1/2 border-b-2 border-black'/> : null}
</div>

Effect of the above code (+ a few more styles):