PrimeVue: Tailwind CSS Sidebar component is not working. Could someone please explain it why?

[tareqWpy]

I'm trying to use the codes of the component in this page
https://tailwind.primevue.org/sidebar/
and when I'm trying to copy and paste the exact same codes, the

v-styleclass="{
			selector: '@next',
			enterClass: 'hidden',
			enterActiveClass: 'slidedown',
			leaveToClass: 'hidden',
			leaveActiveClass: 'slideup',
}"

Does not work at all. I'm coping and pasting the exact same codes.

[atakantepe]

Hi, the code you provided is from the headless demo, which is for animating collapsable items inside the sidebar.

<template>
    <div class="card flex justify-center">
        <Sidebar v-model:visible="visible" header="Sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </Sidebar>
        <Button icon="pi pi-arrow-right" @click="visible = true" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    }
}
</script>

This code should work. If you want to change the inside of it, you can check the headless demo.