css - TailwindCSS `@utility` that takes several arbitrary values - Stack Overflow

admin管理员组

文章数量:1277588

I need to write a TailwindCSS utility that takes several arbitrary values.
Specifically, I want a utility for adding a circular clip-path to an image. I was thinking about something like this:

<script src="/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility clipcirc-* {
  clip-path: circle(--value([percentage]) at --value([percentage]) --value([percentage]));
}
</style>

<img class="clipcirc-[40%_50%_50%]" src="/200/200">

I need to write a TailwindCSS utility that takes several arbitrary values.
Specifically, I want a utility for adding a circular clip-path to an image. I was thinking about something like this:

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility clipcirc-* {
  clip-path: circle(--value([percentage]) at --value([percentage]) --value([percentage]));
}
</style>

<img class="clipcirc-[40%_50%_50%]" src="https://picsum.photos/200/200">

which should then be invoked with e.g. clipcirc-[40%_50%_50%], but it doesn't work.

I worked around this apparent limitation by splitting it into 3 distinct utilities like this:

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@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]);
}
</style>

<img class="clipcirc-radius-[40%] clipcirc-x-[50%] clipcirc-y-[50%]" src="https://picsum.photos/200/200">

which works when invoked with clipcirc-radius-[40%] clipcirc-x-[50%] clipcirc-y-[50%].

However, I would much prefer having a single utility like the first implementation. Is there any way to accomplish this?

• css
• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Feb 24 at 15:56 David Deprost asked Feb 24 at 14:18 David DeprostDavid Deprost 5,15055 gold badges2222 silver badges2727 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can query the entire given value using [*], where the result will have spaces instead of _.

clipcirc-[40%_50%_50%]

--value([*]) // 40% 50% 50%

The only question now is how to generate the clip-path you requested using this result.

I believe there aren't enough options to query different values at the moment, so you need to forward the values in a format that matches the clip-path pattern from the start, so you can query them later using [*], something like this: clipcirc-[40%_at_50%_50%]

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility clipcirc-* {
  clip-path: circle(--value([*]));
}
</style>

<img class="clipcirc-[40%_at_50%_50%]" src="https://picsum.photos/200/200">

本文标签： cssTailwindCSS utility that takes several arbitrary valuesStack Overflow