Navbar transition in tailwindcss - html

Question

I have a navbar and I want that when someone clicks on the button, it will be open with transition in tailwindcss.
const bar_btn = document.getElementById('BAR-BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener(
'click',
function() {
mobileMenu.classList.toggle('w-0')
mobileMenu.classList.toggle('h-0')
}
)
<nav>
<div>
<button id='BAR-BTN'><i class="fas fa-bars fa-2x"></i></button>
</div>
<ul class="transition-transform ease-linear h-0 w-0 delay-1000 duration-1000"
id="mobileMenu">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</nav>
This is my HTML and javascript code and it doesn't work.

Answer 1

I could not find a way to give transition to height property(which we can in pure css) so i used scale to give a transition effect
See if it helps
const bar_btn = document.getElementById('BAR_BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener('click',function()
{
mobileMenu.classList.toggle('transform');
}
);
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav>
<div>
<button id="BAR_BTN" class="px-10 py-2 mt-10 mx-10 w-1/4 hover:bg-green-300 bg-green-200 transition-all">button</button>
</div>
<ul id="mobileMenu" class="mx-10 p-5 border-4 border-black overflow-hidden text-xl w-1/4 origin-top duration-300 scale-y-0" >
<li>Test-1</li>
<li>Test-2</li>
<li>Test-3</li>
</ul>
</nav>

Answer 2

I have the same problem just now and I solve it.
// .tsx
navigationRef.current?.classList.toggle('active');
<div ref={navigationRef} className=' w-[80px] ... duration-500 transition-all ' />
// index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.active {
width: 300px !important;
}
}
The effect as follow:
No need scale and the effect may be not as expected.