Nuxt.jsにTailwind.cssを入れる方法

いつも小説家になろうのブログばかり書いているので、今日は久々に個人開発の方の記事を更新です。

最近Reactで色々作ってたのですが、Vue.jsを触る機会がありましてハマっちゃいました。
そこから、Nuxt.jsにハマってささっとUI組みたいのでTailwind.cssを入れようとしたところで躓いたのでメモです。

Nuxt.jsにTailwind.cssを導入する

普段ピュアなHTML/CSS/JSや、ReactにTailwind.cssを入れる時と同じやり方だと、Nuxt.jsでは動きません。
なので以下の順序で行なってください

まずはターミナルで、プロジェクトフォルダに移動する

cd project-folder

次に、Tailwindcss, postcssをインストール。nodeのバージョンは21.6.2で行いました。バージョン管理はhomebrewを使っています。Voltaがいいって聞きますがどうなんでしょう？

npm install -D tailwindcss postcss autoprefixer

インストール後、configファイルを生成する。

npx tailwindcss init

そしてここが大事なのですが、nuxt.config.jsにTailwind.cssの設定を追加します。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
// ここから
  css: ['~/assets/style.css'], // ここは自分のプロジェクトフォルダに合わせる
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
// ここまでを追加
})

Tailwind.cssのconfigにも記述を追加

/** @type {import('tailwindcss').Config} */
module.exports = {
//　ここから
// devでvueを起動した時に、watchするファイルなのでフォルダを追加した時はここに追加する
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
// ここまでを追加
  theme: {
    extend: {},
  },
  plugins: [],
}

終わりです！

Nuxt.jsをもっと使うぞ！

元々Web制作をしていたので、ReactよりもVueでNuxtを使った方がとても理解しやすかったです。
個人開発を進めるぞー！

参考記事

公式サイト：https://tailwindcss.com/docs/guides/nuxtjs
Zennの記事：https://zenn.dev/kata_n/articles/2d4744d1bb6ab6