【TailwindCSS】heightにtransitionを設定する方法

heightにtransitionを設定するにはtailwind.config.jsに以下を追記します。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'height': 'height',
      }
    }
  }
}

するとtransition-heightが使用可能になります。

<div class="transition-height">
  <!-- ... -->
</div>

繰り返し使用しない場合には以下のように記述することもできます。

<div class="transition-[height]">
  <!-- ... -->
</div>