Tailwindcss `@utility`, который занимает несколько произвольных значений ⇐ CSS

[Anonymous]

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

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

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

@utility clipcirc-* {
clip-path: circle(--value([percentage]) at --value([percentage]) --value([percentage]));
}


[img]https://picsum.photos/200/200[/img]
< /code>
< /div>
< /div>
< /p>
, который затем следует использовать, например, 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]);
}


[img]https://picsum.photos/200/200[/img]
< /code>
< /div>
< /div>
< /p>
, который работает при вызываемом с помощью Clipcirc-radius- [40%] clipcirc- x- [50%] clipcirc-y- [50%] 

.
Однако я бы предпочел иметь одну утилиту, такую ​​как первая реализация. Есть ли способ сделать это?

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