Nuxt.js上でtailwind css + bootstrapを共存させる方法

Nuxt.js上でtailwindcssとbootstrapを共存させたい場合どうすればいいのだろうか。もちろん非推奨なのだろうけど、プロジェクトの都合上こういうことがしたい場合がある。

Nuxt Tailwindというパッケージがあるが指定されているバージョンよりも低いバージョンでNuxtは構成されているため前者は諦める。

別にtailwindはバージョン3でもいいだろう。絶対に重くなるので、それを避けるためにJIT機能は使いたい。これでだいぶエコにできるだろう。

tailwindのクラス名にtw-のプレフィクスを付けるようにしよう。

tailwindのUIライブラリからコピペする際に全てのクラス名にtw-を手動で付けるのは面倒だなと困っていたらこういうサイトがあった。

上部のテキストエリアにUIのHTMLをコピーすると、下部にtw-をつけたHTMLを吐き出してくれる。使えるやつだ。

あとは以下の動画を参考にしておく。