How does w-1/2 result in width: 50% – I want to recreate it for my custom utility #19660
Unanswered
katerlouis
asked this question in
Help
Replies: 2 comments 8 replies
-
|
The trick is to multiply the value by Thus: @utility foobar-* {
…
left: calc(--value(ratio) * 100%);
…
}So |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
The issue is that @utility foobar-* {
position: absolute;
left: calc(--value(ratio) * 100%);
}Now If you also want to support arbitrary percentage values like @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. |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment

Uh oh!
There was an error while loading. Please reload this page.
-
I want to leverage how
w-1/2produceswidth: 50%to do something similar in my utility.see reproduction: https://play.tailwindcss.com/QKUq2w8KlY?file=css
Help very much appreciated :)
Beta Was this translation helpful? Give feedback.
All reactions