Nuxt3 + Tailwindcss3(+daisy ui) 導入方法
Nuxt3にTailwindcss3を導入する方法をまとめました。
公式ドキュメントやyoutubeなどを見ましたが、古いバージョンの情報が混ざってたりして
分かりづらかったので、自分なりに簡潔にまとめました。
(tailwindcss3公式ドキュメント↓↓ 一応載せておきます...）
Nuxt3のインストールがまだの方はこちらの記事をお読みください。
導入方法
STEP 1
作成したプロジェクトディレクトリでtailwindcssをインストール
npm install -D tailwindcss@latest
@latestをつけると最新版がインストールされる（執筆時点では3.0.24)
導入チュートリアルを見ていると、postcssやautoprefixerもインストールしているものを見かけるが、Nuxt3では既に入っているので不要。
STEP 2
npx tailwindcss init
これで、tailwind.config.jsが作成される。
STEP 3
自動生成されたtailwind.config.jsに設定を追記する。
module.exports = {
content: [
"app.vue", //app.vueでtailwindcssを使いたい場合
"./components/**/*.{vue,js,jsx,ts,tsx}",
"./pages/**/*.{vue,js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
STEP 4
assets/stylesディレクトリを作成し、tailwind.cssファイルを追加する。
@tailwind base;
@tailwind components;
@tailwind utilities;
STEP 5
nuxt.config.tsに設定を追記する。
import { defineNuxtConfig } from 'nuxt'
//https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ["@/assets/styles/tailwind.css"],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
},
},
},
},
})
STEP 6
tailwindcssが適応されたか確認する。
<template>
<div>
<!-- <NuxtWelcome /> -->
<h1 class="pl-24 pt-12 text-3xl text-red-600 underline">
Hello world!
</h1>
</div>
</template>
ローカル環境を立ち上げる
npm run dev
適応が確認できました。
全体のディレクトリ構成↓
STEP7 おまけ
tailwindcssのUIフレームワークであるdaisy uiも使えるようにする手順です。
daisy uiをインストールして、
npm i daisyui
tailwindcssの設定ファイルに追記するだけです。
module.exports = {
plugins: [require("daisyui")],
};
設定ファイル全体のコードはこんな感じになります。
module.exports = {
content: [
"./components/**/*.{vue,js,jsx,ts,tsx}",
"./pages/**/*.{vue,js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
};
試しにapp.vueで使ってみます。
<template>
<div>
<button class="btn">Hello daisyUI</button>
</div>
</template>
こんなボタンが表示されてれば成功です。
↓は公式のインストール手順
class="btn"を書くだけで、
ホバー時の色変や、クリック時のアニメーションとかまで実装されるのは最高に便利です
＞.＜
STEP 8 おまけ＋
Visual Studio Codeを使っている場合は、拡張機能を入れましょう！ （公式ドキュメントでも紹介されていましたが、大分時間が経ってこの拡張機能の存在に気づきました..)
こんな風に入力時にサジェストしてくれるので、コーディングが楽になります。
これから大いに活躍してくれそうで楽しみです～
参考
参考にさせて頂きました。ありがとうございました！
Discussion