Скачать или смотреть Creating a TailwindCSS @ utility with Multiple Arbitrary Values for clip-path

Learn how to define a single TailwindCSS utility that accepts multiple arbitrary values, enabling custom circular clip-paths on images with concise syntax.
---
This video is based on the question https://stackoverflow.com/q/79463817/ asked by the user 'David Deprost' ( https://stackoverflow.com/u/6033410/ ) and on the answer https://stackoverflow.com/a/79464174/ provided by the user 'rozsazoltan' ( https://stackoverflow.com/u/15167500/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: TailwindCSS `@ utility` that takes several arbitrary values

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Introduction

TailwindCSS utilities often accept single arbitrary values, but what if you want a single utility to handle multiple parameters? For example, adding a circular clip-path to an image requires radius and center coordinates — three values in total. Defining separate utilities for each parameter works, but it's verbose and inconvenient.

The Challenge

You want to write a utility like this:

[[See Video to Reveal this Text or Code Snippet]]

that compiles to:

[[See Video to Reveal this Text or Code Snippet]]

But directly accessing multiple arbitrary values in TailwindCSS utilities using separate placeholders doesn't work as expected.

Why Separate Utilities Work But Are Tedious

Defining three utilities:

[[See Video to Reveal this Text or Code Snippet]]

and invoking them like:

[[See Video to Reveal this Text or Code Snippet]]

works but is cumbersome.

The Better Way: Use a Single Arbitrary Value Token

TailwindCSS allows grabbing the entire arbitrary value string via the placeholder [ * ]. This captures all the underscore-separated parts as a single space-separated string.

[[See Video to Reveal this Text or Code Snippet]]

If you supply:

[[See Video to Reveal this Text or Code Snippet]]

then --value([*]) becomes:

[[See Video to Reveal this Text or Code Snippet]]

which matches the syntax for the clip-path property:

[[See Video to Reveal this Text or Code Snippet]]

Why add _at_?

Because underscores _ become spaces, the pattern 40%_at_50%_50% converts to:

[[See Video to Reveal this Text or Code Snippet]]

which is exactly the CSS syntax required.

Complete Example

[[See Video to Reveal this Text or Code Snippet]]

Summary

Use [ * ] to capture all arbitrary values in a single token.

Pass composite values matching the CSS syntax but use underscores _ as separators.

This pattern creates concise, reusable utilities with multiple arbitrary arguments in TailwindCSS.

This approach streamlines your custom utilities and retains the expressiveness of Tailwind.