0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.jsにtailwindcssを導入する

Posted at

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

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

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が有効になっているはずなので、確認する。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?