Nuxt.jsにtailwindcssを導入する

参考にするサイトを間違えたり、勘違いして無駄に時間を浪費してしまったので
備忘録として記録を残す。

基本は上記のサイトに記載してある順に行えば良いので、これ以降は見る必要はない。

Nuxt.jsのアップデートをする

$ npm update nuxt

Please make sure to update your Nuxt version to be minimum v2.15.3.
お使いのNuxtのバージョンをv2.15.3以上にアップデートしてください。

と書いてあるので、念の為アップデートしておく。

tailwindcssをインストール

npm install --save-dev @nuxtjs/tailwindcss

nuxt.config.jsに追記する

下記はcreate-nuxt-appコマンドを実行した際に出てくる質問のなかで、tailwindcssを選んでいると、はじめから記載されている。

nuxt.config.js

export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

今回は、何を思ったのか上記をtailwind.config.jsに書くんだと勘違いしまってた。
この時点ではtailwind.config.jsはまだないので注意。

tailwind.config.jsを作成

$ npx tailwindcss init

このコマンドを叩くと、tailwindcss.config.jsファイルがルート上に作られる。

ここまでやれば、tailwindcssが有効になっているはずなので、確認する。