我試著用Tailwind的任意值特性來制作一個div的最大高度動畫，范圍從0到100%,但是沒有效果:

document.getElementById("toggle").addEventListener("click", () => {
  document.getElementById("txt").classList.toggle("max-h-full");
  document.getElementById("txt").classList.toggle("max-h-0");
});

<script src="https://cdn.tailwindcss.com"></script>
<button id="toggle" class="m-3 p-2 border hover:bg-slate-300">Toggle text</button>
<p id="txt" class="m-3 border overflow-hidden max-h-full transition-[max-height] ease-out">
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

這可能是CSS問題，而不是TailwindCSS問題。

CSS希望速度更快，所以有幾個值不能被動畫化。當父項沒有明確的尺寸時，這些不可想象的值之一是100%。

據我所知，除非你愿意設置一個明確的高度(例如100像素)或者使用一些JavaScript，否則沒有辦法實現這個動畫。

因為看起來你正在嘗試做一個手風琴，所以我推薦看看這篇文章，它使用WebAnimationsApi來實現你想要的相同效果:https://CSS-tricks . com/how-to-animate-the-details-element-using-waapi/

查看更多:如何使用css3動畫制作100%寬度和高度的動畫？

這對我很有效:

tailwind.config.js

theme: {
  extend: {
    transitionProperty: {
      'max-height': 'max-height'
    }
  }
}

還有我的課

<!-- Hidden -->
<div class="overflow-hidden transition-max-height max-h-0"></div>

<!-- Visible -->
<div class="overflow-hidden transition-max-height max-h-[32]"></div>