Nuxt.jsでページ遷移時のtransitionが動かないとき

事象

Nuxt.jsでページ遷移時のtransitionを設定する際は、このように書くと普通動きます。
ルーティング - NuxtJS

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

しかし、開発サーバー上ではうまく動いてるんですが、generateしたりproductionモードで動作させるとどうも動かなくなる。。。

解決法

/* purgecss start ignore */と/* purgecss end ignore */でくくる。

/* purgecss start ignore */
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}
/* purgecss end ignore */

手っ取り早いのはこれだけど他にも解決方法は色々ある。

• Developmint/nuxt-purgecss: Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js
• purgecss-docs/whitelisting.md at master · FullHuman/purgecss-docs
• Controlling File Size - Tailwind CSS

原因

tailwindCSS-moduleを使っていたため発生してしまっていました。

Tailwind CSS is now a command away from your NuxtJS project ✨

Install the module and get:
🗃️ Automatic files creation
🧹 PurgeCSS included
🚀 PostCSS preset env to stage 1 https://t.co/IJkPYApxyT

— Nuxt.js (@nuxt_js) June 11, 2019

tailwindCSS-moduleにはPurgeCSSがincludeされていて、
https://github.com/nuxt-community/tailwindcss-module

特に設定しないとPurgeCSSは本番では動作し、開発サーバー上では動作しない設定になっています。
https://github.com/nuxt-community/tailwindcss-module/blob/master/lib/module.js#L5

そのため、動的にセットされるこのtransitionのクラスが開発サーバーではpurgeされず、本番でpurgeされてしまうため発生してしまっていたようでした。
めでたし。