Custom @utility using spacing

[browner12]

I am trying to make a custom utility that behaves similar to any of the spacing related utilities we have by default, like padding, margin, or gap.

For these utilities, you should be able to supply an integer that corresponds to Tailwind's spacing scale, or provide arbitrary values:

<div class="p-4"></div>

<div class="p-[13px]"></div>

What I am trying to do is set a min-width that uses the smaller of either 100% or a given value, as it is a pattern I seem to run into a lot. I currently have it working with:

@utility min-width-* {
    min-width: min(100%, --value([length], [percentage]));
    min-width: min(100%, --spacing(--value(integer)));
}

but I believe I should also be able to do it as a one-liner like:

@utility min-width-* {
    min-width: min(100%, --value(--spacing-*, [length], [percentage]));
}

which seems to follow the docs from https://tailwindcss.com/docs/adding-custom-styles#functional-utilities exactly. However, I can only get the first version to work. Am I doing something wrong, or is this possibly a bug?

[wongjn]

You are not doing anything wrong and it is not a bug.

--value(--spacing-*) is a theme token "look-up". However by default, Tailwind has no theme tokens under --spacing. So for the bare value with just an integer, you need to use --spacing(--value(integer)) to get the spacing scale.

[browner12]

I guess I'm confused, how is this different than the --tab-size-* in the example? Isn't that also a theme token lookup?

[wongjn]

Yes, and the example assumes there would be theme tokens defined with it.

[browner12]

ohh, so I would have to explicitly define the token like:

--spacing-16: 1rem;

rather than relying on the dynamic scale?

[wongjn]

That's right.

[browner12]

great, thank you.