Why use Tailwind arbitrary/custom values over existing classes

[seho-nl]

Not really worth a long thread, but I was just wondering why some components use arbitrary or custom Tailwind values instead of existing ones. Doesn't that result in unnecessary classes?

For example in the NavigationMenu top values are currently custom.

shadcn-vue/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue

Lines 17 to 24 in e39e2c7

	<template>
	<NavigationMenuIndicator
	v-bind="forwardedProps"
	:class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
	>
	<div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
	</NavigationMenuIndicator>
	</template>

Where top-[60%] could also be the existing top-3/5

shadcn-vue/apps/v4/registry/new-york-v4/ui/navigation-menu/NavigationMenuTrigger.vue

Lines 23 to 35 in e39e2c7

	<template>
	<NavigationMenuTrigger
	data-slot="navigation-menu-trigger"
	v-bind="forwardedProps"
	:class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
	>
	<slot />
	<ChevronDown
	class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
	aria-hidden="true"
	/>
	</NavigationMenuTrigger>
	</template>

Where top-[1px] can also be the existing top-px

If it is an improvement I'm happy to start a pull request, but there might be a very good reason to do it like this.