Tailwind @Utility, которая занимает несколько произвольных значений ⇐ CSS

[Anonymous]

Мне нужно написать утилиту Tailwindcss, которая занимает несколько произвольных значений.

конкретно, я хочу утилиту для добавления кругового зажима path < /code> к изображению. Я думал о чем-то вроде

Код: Выделить всё

@utility clipcirc-* {
clip-path: circle(--value([percentage]) at --value([percentage]) --value([percentage]));
}
< /code>
, который затем следует использовать, например, ClipCirc- [40%_50%_50%] 

, но он не работает. /p>

Код: Выделить всё

@utility clipcirc-radius-* {
--clip-circ-radius: --value([percentage]);
clip-path: circle(var(--clip-circ-radius) at var(--clip-circ-x) var(--clip-circ-y));
}
@utility clipcirc-x-* {
--clip-circ-x: --value([percentage]);
}
@utility clipcirc-y-* {
--clip-circ-y: --value([percentage]);
}

, который работает при вызовах с Clipcirc-radius- [40%] clipcirc-x- [50%] clipcirc-y- [50%] .
< Br /> Однако я бы предпочел иметь одну утилиту, такую ​​как первая реализация. Есть ли способ сделать это?

Подробнее здесь: https://stackoverflow.com/questions/794 ... rary-value