Nuxt.js v3系 で nuxt/ui から nuxtjs/tailwindcss に変更しました

バージョン

• Nuxt.js: 3.17.6

環境

• OS: windows11 WSL2 Ubuntu
• Shell: zsh 5.9

内容

Nuxt.js v3系 でアプリを作成しよう思いました。Tailwindをつかおうと思ったところ、NuxtUIをインストールすればTailwindが含まれるということだったので NuxtUIをインストールしました。
しかし、使い方がわかっておらず、templateでclass属性にTailwindをあててもCSSが反映されなかったのでした（owari）
NuxtUIの使い方理解に少しコストがいりそうだったので迂回策がないか調べていると、Tailwindはnuxtjs/tailwindcssをインストールして使うという記事を見つけ、参考にすると無事CSSが反映された。という話です。

実施した手順

NuxtUIをアンインストールして、Tailwind CSSだけを使用することにしました。

# @nuxt/uiパッケージをアンインストール
cd project-directory  # プロジェクトルートディレクトリに移動
npm uninstall @nuxt/ui  

Nuxtの設定ファイルを編集

// nuxt.config.ts を編集
export default defineNuxtConfig({
  (省略)
  ,
  modules: [
    '@nuxt/eslint',
    (省略)
    // '@nuxt/ui'  ここを削除
  ]
)}

次にTailwindをインストールして、設定ファイルを編集

npm install -D @nuxtjs/tailwindcss
# もしくは npm install --save-dev @nuxtjs/tailwindcss
# tailwindcss は開発時のみの依存関係なので--save-deでもいいらしい

// nuxt.config.ts を編集
export default defineNuxtConfig({
  (省略)
  ,
  modules: [
    '@nuxt/eslint',
    '@nuxtjs/tailwindcss',  //ここを追加
    (省略)
  ]
)}

自分の場合はこれで反映されたので引き続きコーディングに取り組みました。

参考にした記事 m(__)m

• NuxtUIを用いたWebアプリ構築（ https://zenn.dev/reinsp5/articles/5ea261265d801a ）