【Vue+TailwindCSS】導入方法

はじめに

Vue.js3にTailwindCSSを導入する方法について書いていきます。

Vue.jsのインストール

npm install -g @vue/cli

-gをつけてグローバルの環境にインストールします。

Vueプロジェクトの作成

vue create sample

cd sample

npm run serve

localhost:8080へアクセスし、Vueのページが表示されていれば成功です。

TailwindCSSのインストール

TailwindCSSの4系バージョンだとViteもつけないといけないようです。
今回はViteではなく、Vue CLIでバンドルしたいため、3系バージョンを指定してインストールします。
Vite×Vue×TailwindCSSを試したい場合は下記の記事が参考になりました。
記事

npm install -D tailwindcss@3.4.13 autoprefixer postcss

npx tailwindcss init -p

tailwind.config.jsの編集

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

srcディレクトリ傘下にあるTailwindCSS独自のclassをバンドル対象とします。

main.cssの作成

src/assets/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

自分で作成するファイルになります。

main.jsの編集

src/main.js

import './assets/main.css'

上記を追記してください。

表示確認

TailwindCSSのコードはsrcディレクトリ傘下のvueファイルに書いてください。
TailwindCSSが適用されて表示されれば成功です。

トラブルシューティング

• TailwindCSSはコマンドを使用してバンドルしなくていい。
  ⇒「npm run serve」でバックエンドを立ち上げつつ、フロントもコマンドを使用してバンドルしなくてはいけないと思っていたが、「npm run serve」１本でフロントのバンドルもされるみたいです。

• 表示元であるpublic/index.htmlには触らないこと。
  ⇒<link>でCSSを読み込む処理を書かないといけないと思っていたが、書かなくていいみたいです。