Как создать произвольный служебный класс ширины границы с помощью TailwindCSS? ⇐ CSS

[Anonymous]

Я пытаюсь использовать TailwindCSS для создания классов произвольной ширины границ.

Это работает, когда я делаю это:

"border-x-[20px]" например, правильно сгенерировать это:

.border-x-\[20px\] { ширина левой границы: 20 пикселей; ширина границы справа: 20 пикселей; } Но когда я пытаюсь это сделать:

"border-x-[var(--tri-base)]" Вместо этого он неправильно генерирует произвольную утилиту цвета, например:

.border-x-\[var\(--tri-base\)\] { граница-левого цвета: вар (--tri-base); граница-правый-цвет: вар (--tri-base); } Как мне заставить его генерировать утилиту ширины с синтаксисом var()?

Я знаю, что могу просто использовать директиву @apply, но по сути это просто обман и использование старого доброго CSS для решения моих проблем, плюс оно не подхватывается расширением VS Code Tailwind.