Add min-size-[...] & max-size-[...] too

[developerbola]

Hi there
Please add min-size-[...] & max-size-[...] too, it will be so usefull:

bad & too long:
min-h-[...]
max-h-[...]
min-w-[...]
max-w-[...]

instead:
min-size-[...]
max-size-[...]

[happycollision]

You can add this without help from the TW team. The @utility directive is powerful enough to get that done. Here's a Play with the necessary setup: https://play.tailwindcss.com/3rmSbR8T7p

[rozsazoltan]

Avoid using @apply, especially with utility classes.

• https://x.com/adamwathan/status/1890404835888910467
• https://x.com/adamwathan/status/1890405698153972130
• https://x.com/adamwathan/status/1890406016291938701
• https://x.com/adamwathan/status/1890406873586622932
• https://discord.com/channels/486935104384532500/1377282535112839189/1378706208650952764

@utility min-size-* {
  min-width: --spacing(--value(number));
  min-height: --spacing(--value(number));
}

@utility max-size-* {
  max-width: --spacing(--value(number));
  max-height: --spacing(--value(number));
}

• https://play.tailwindcss.com/xNdhNcEDTv?file=css

[rozsazoltan]

If you still want to use @apply to do this, then make sure to include ratio, percentage, and length values as well.

• Add min-size-[...] & max-size-[...] too #18589 (comment)

@utility min-size-* {
  @apply min-w-[--spacing(--value(number))];
  @apply min-h-[--spacing(--value(number))];
  @apply min-w-[calc(--value(ratio,_[ratio])_*_100%)];
  @apply min-h-[calc(--value(ratio,_[ratio])_*_100%)];
  @apply min-w-[--value([percentage],_[length])];
  @apply min-h-[--value([percentage],_[length])];
}

@utility max-size-* {
  @apply max-w-[--spacing(--value(number))];
  @apply max-h-[--spacing(--value(number))];
  @apply max-w-[calc(--value(ratio,_[ratio])_*_100%)];
  @apply max-h-[calc(--value(ratio,_[ratio])_*_100%)];
  @apply max-w-[--value([percentage],_[length])];
  @apply max-h-[--value([percentage],_[length])];
}

• https://play.tailwindcss.com/7K88DNQShl?file=css

[happycollision]

None of the links you provided say why you shouldn't use @apply in a custom utility definition. Unless it's in Discord, which I cannot get into. I think that is part of the paid TW community thing.

Where have you seen someone say it is a bad idea? Or just, why is it a bad idea?

[rozsazoltan]

As mentioned by @happycollision, you can do it yourself. But then you should handle not only the number but also the ratio where the value needs to be multiplied by 100%, and also allow arbitrary percentage and length values.

Among the properties with --value, only the one matching the value inserted in place of * will remain.

• If I put 64 in place of *, then it's a number;
• if 3/4, then a ratio (which should be multiplied by 100%);
• if [45%], then a percentage;
• if [5px], then a length.

You can never write two values at the same time, so there's no issue with this.

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

@utility max-size-* {
  max-width: --spacing(--value(number));
  max-height: --spacing(--value(number));
  max-width: calc(--value(ratio, [ratio]) * 100%);
  max-height: calc(--value(ratio, [ratio]) * 100%);
  max-width: --value([percentage], [length]);
  max-height: --value([percentage], [length]);
}

• https://play.tailwindcss.com/WiuRUfbiag?file=css