Мобильная версияКак создать произвольный служебный класс ширины границы с помощью TailwindCSS? ⇐ CSS
-
Anonymous
Как создать произвольный служебный класс ширины границы с помощью TailwindCSS?
Я пытаюсь использовать 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.
Я пытаюсь использовать 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.
