如何使用Tailwindcss实现显示/隐藏过渡效果？

首先，在HT ML 文件中添加一个按钮和一个需要进行过渡的元素。在按钮上绑定点击事件，通过js来控制元素的显示/隐藏状态。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" id="toggleBtn">切换</button>
<div class="transition duration-500 ease-in-out h-0 overflow-hidden" id="transitionEl">
  <p class="p-4 bg-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
接着，在js文件中，对按钮进行点击事件监听，并根据当前状态来切换元素的显示/隐藏状态。
const toggleBtn = document.getElementById('toggleBtn');
const transitionEl = document.getElementById('transitionEl');
toggleBtn.addEventListener('click', function() {
  if (transitionEl.classList.contains('h-0')) {
    transitionEl.classList.remove('h-0');
    transitionEl.classList.add('h-auto');
  } else {
    transitionEl.classList.remove('h-auto');
    transitionEl.classList.add('h-0');
最后，在CSS中添加过渡效果，并设置元素在隐藏/显示状态下的高度。
#transitionEl {
  height: 0;
#transitionEl.h-auto {
  height: auto;
#transitionEl.h-0 {
  height: 0;
#transitionEl {
  transition: height 0.5s ease-in-out;