Nuxt3でのTailwindCSSの導入方法2パターンあるけど、どっちが良いの？
NuxtプロジェクトにTailwindCSSを組み込む際、選択肢が2つあるため、どちらを選ぶべきか悩む方も多いでしょう。私自身もその選択に際してかなり迷った経験があるため、その点について詳しく解説します。
2つのパターンとは
- 生のTailwindCSSをそのまま使用する
- @nuxtjs/tailwindcssを使用する
これらはNuxtでTailwindCSSを導入する際によく見かける2つのパターンです。TailwindCSS公式にも、これら2つのインストールパターンが記載されています。
結論
@nuxtjs/tailwindcssを使用してインストール方法が圧倒的におすすめです。
なぜか
- 工数が少なく済む
- 2工程で完了
- メンテナンスが楽
- configを細かく設定しなくても使用できる
- 余計なライブラリを入れないで済む
-
postcssやautoprefixerのインストールが不要
-
@nuxtjs/tailwindcssを使用してのインストールのやり方
@nuxtjs/tailwindcssを使用してのインストールのやり方は以下の通りです。
-
@nuxtjs/tailwindcssをインストールする
npm install -D @nuxtjs/tailwindcss
- nuxt.config.jsのmodulesに
'@nuxtjs/tailwindcss'を追加する
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
以上！！！
これだけでNuxtでTailwindCSSを使用することができるようになります。
もっと細かな設定をしたい方は都度nuxt.config.jsをいじったり、tailwind.config.jsを新たに作成することで設定を変更することができます。
生のTailwindCSSでインストールすると、、、？
TailwindCSSをそのまま使用するとするとpostcssやautoprefixerも追加でインストールし、nuxt.configの設定する量が増え、更にtailwind.config.jsの設定も必要になります。（詳細はこちら）
@nuxtjs/tailwindcssが2工程で済みますが、生のTailwindCSSを使用すると5工程必要です。
逆に生のTailwindCSS（Standard installation）の方が良いケース
Standard installationが良いケースもあります。
それはTailwindCSSの最新機能を使用したい場合です。
ちょっと詳しく
最近TailwindCSSのv3.4.0がリリースされましたが、@nuxtjs/tailwindcss経由で使用している場合、すぐにはv3.4.0の機能を使えません。
@nuxtjs/tailwindcssは、TailwindCSSをNuxtで簡単に使用できるようにするための設定を提供しています。そのため、TailwindCSSの最新バージョンがリリースされても、@nuxtjs/tailwindcssがそれに対応するまでには時間がかかる可能性があります。この遅延は、最新の機能をすぐに試したい開発者にとっては不便かもしれません。
まとめ
ほとんどの場合、@nuxtjs/tailwindcssを使用することが推奨されます。設定が簡単で、追加のライブラリをインストールする必要がなく、メンテナンスも容易です。
しかし、TailwindCSSの最新機能をすぐに使いたい場合は、生のTailwindCSSのインストール方法を選択することが良いでしょう。
ただ、TailwindCSSのv3.4.0がリリースされてから1週間後には@nuxtjs/tailwindcssでも使えるようになった事例を考えると、この遅延はそれほど大きな問題ではないかもしれませんが、プロジェクトの要件に応じて選択してください。
Discussion