Is it possible to offset Menu when you toggle it with button

[BASEFlyer]

Here is our code:
<div class="inline-flex"> <Button label="Add Color" class="flex h-11 w-48 inline-flex items-center justify-center rounded-l bg-gray-900 px-3 py-1.5 text-sm font-semibold text-gray-200 shadow-sm hover:bg-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700"/> <Button :unstyled="true" @click="toggle"> <ChevronDownIcon class="h-11 w-6 text-gray-200 font-semibold text-2xl bg-gray-700 rounded-r hover:bg-gray-500"/> <Menu ref="buttonMenu" id="overlay_menu" :model="MenuButtons" :popup="true"/> </Button> </div>

So we would like to offset it to the right to get this result:

[tugcekucukoglu]

PrimeVue has a solution for this case. We want to suggest using SplitButton component that uses Button and TieredMenu internally.

https://primevue.org/splitbutton

[BASEFlyer]

Thank you, not sure how I missed this component!
So i imported SplitButton component with unstyled mode I copy Tailwind preset and I start getting this error: Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
i know for a fact that the problem is in this code

Appreciate your help.

[tugcekucukoglu]

https://primevue.org/splitbutton/#theming.tailwind this example seems to be working without having any errors. How can I replicate the issue?

[BASEFlyer]

I did here is a link:

https://stackblitz.com/edit/qv2z6q?file=src%2FApp.vue