How does w-1/2 result in width: 50% – I want to recreate it for my custom utility

[katerlouis]

I want to leverage how w-1/2 produces width: 50% to do something similar in my utility.

@utility foobar-* {
  position: absolute;
  /* ...  */

  // does produce left: 1/2 instead of expected 50%
  left: --value(ratio); 

  // does not produce anything for "foobar-1/2"
  // left: --value(percentage);
  // left: --value(relative-size);
  // ..
}

see reproduction: https://play.tailwindcss.com/QKUq2w8KlY?file=css

Help very much appreciated :)

[wongjn]

The trick is to multiply the value by 100%:

1/2 × 100% = 50%

Thus:

@utility foobar-* {
  …
  left: calc(--value(ratio) * 100%);
  …
}

So foobar-1/2 → left: calc(1/2 * 100%) → left: 50%

https://play.tailwindcss.com/yTdLRIu8Fe?file=css

[katerlouis]

Thanks! While the result is the same, I am curious how to recreate left: 50% exactly.

Also: using --value(ratio) there's no intellisense autosuggestion, while there is for w-

Edit: I just double checked, and in fact w-1/2 also results in the calc css. So good on that front! No auto suggestion for foobar- remains though :(

[wongjn]

Indeed, there are no intellisense suggestions - a known limitation.

[katerlouis]

Could you elaborate on that? Why is intellisense for some custom utilities values working and not for ratios though?
https://play.tailwindcss.com/zFS57aFzSp shows that --spacing(--value(number)) gives intellisense, same for --value(--custom-token-*) or --value(--color-*)

[wongjn]

Suggestions work for things like --value(--color-*) because Tailwind can "lookup" all possible values for the given theme namespace. --spacing(--value(number)) also works because of #17308, where a hardcoded list of suggestions are given. However, there is no hardcoded set of values for the ratio bare value type it seems, hence no suggestions.

[InlitX]

The issue is that --value(ratio) returns the literal fraction 1/2, not a percentage. You need to multiply it by 100% using calc():

@utility foobar-* {
  position: absolute;
  left: calc(--value(ratio) * 100%);
}

Now foobar-1/2 will output left: 50%, foobar-3/4 will output left: 75%, etc.

If you also want to support arbitrary percentage values like foobar-[33%], you can add a second declaration:

@utility foobar-* {
  position: absolute;
  left: calc(--value(ratio) * 100%);
  left: --value([percentage]);
}

The second declaration only applies when an arbitrary percentage is used, otherwise it's ignored.

---

[katerlouis]

Thanks for the reply! While that will result in the correct behavior in the browser, the css will not be left: 50%, but left: calc(1/2 * 100%) – Now that I opened this can of worms, I'm really curious if left 50% can be recreated exactly.

Also with --value(ratio) I do not get intellisense suggestions like w- does.

My gut says --value(percentage) (no angle brackets) should do the trick, but instead it does nothing. What class would trigger --value(percentage) to print css? It's neither foobar-1/2 nor foobar-50% nor foobar-0.5

I double checked and yes, w-1/2 also results in the calc version, great! But that leaves the issue of autosuggestions working for w- but not for foobar-

[InlitX]

The autosuggestions work for w- because those are built-in utilities that your editor's Tailwind extension knows about.

Custom utilities defined with @Utility don't get indexed for intellisense automatically - that's more of an editor configuration thing than a Tailwind issue unfortunately

[katerlouis]

That's not true in a general sense, is it? When doing left: --spacing(--value(number)), intellisense does work on custom utilities. Same for --value(--color-*), or --value(--color-blue-*) (if blue color tokens exist that is), or --value(--my-custom-*) – why not for foobar-1/2 then?

see reproduction: https://play.tailwindcss.com/zFS57aFzSp (also confirmed to work within my vscode setup)

[InlitX]

You're absolutely right, my bad! I'd read [this discussion](#18291) earlier and got confused.

Intellisense does work for custom utilities when they use --value() with design tokens like --spacing(--value(number)) or --value(--color-*).

The difference with ratios is they're calculated values rather than predefined tokens, so there's no list for the editor to suggest from.

Thanks for clarifying!