How do I generate an arbitrary border-width utility class with TailwindCSS?

Issue

I am trying to use TailwindCSS to generate arbitrary border width classes.

It works when I do this:

"border-x-[20px]"

for example, correctly generating this:

.border-x-\[20px\] {
    border-left-width: 20px;
    border-right-width: 20px;
}

But when I try to do this:

"border-x-[var(--tri-base)]"

it incorrectly generates arbitrary colour utility instead, like this:

.border-x-\[var\(--tri-base\)\] {
    border-left-color: var(--tri-base);
    border-right-color: var(--tri-base);
}

How do I get it to generate a width utility with var() syntax?

I know I can just use the @apply directive but that's basically just cheating and using plain old CSS to solve my problems, plus it doesn't get picked up by the VS Code Tailwind extension.

Solution

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

Answered By - Ihar Aliakseyenka