Videos
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%
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):
border utility is one of specific "multipurpose" Tailwind's utilities which may represent either color or width. Tailwind may resolve arbitrary value itself - however if it cannot be done (like with variables) you should help him with some "type" keyword.
This is documented in the "Resolving Ambiguities" guide. Within Tailwind's source code we can see that in case of borders, the width is controlled by length or line-width (line 1462) "hints". So your class should be like
<div class="border-x-[length:var(--tri-base)]"></div>
<!-- or -->
<div class="border-x-[line-width:var(--tri-base)]"></div>
DEMO
Try to use the "apply" directive:
.border-x-\[var\(--tri-base\)\] {
@apply border-x-[var(--tri-base)];
}
You can apply border-width of 2px only to the top edge according to the documentation as following
<div class="border-t-2 border-blue-900">foo</div>
The error made was there is no utility class called border-t-1 in tailwind-CSS. Also applying border utility class adds the the CSS styling of border-width: 1px; which adds a border-width to all sides.
Check out the solution at tailwind playground
EDIT: Check out shingo.nakanishi's answer top apply border-top-width of 1px if you are using JIT mode
You can achieve this by using below class
border-solid border-0 border-t border-blue-900