Vue CliにTailwind CSSを読み込む方法 #Vue.js

Tailwind CSS ってなに？

CSSフレームワークの一つで、いくつものclassを組み合わせることでコンポーネントが作成できます。
最大の特徴として、1つのクラスに対して1つプロパティのみが付与されていることです。
FLOCSSにおけるユーティリティクラスと同じ発想であり、インラインCSSを書くようにclassを付与していき、コンポーネントを作成していきます。

<!-- 
  border: 1px solid #000;
  border-radius: 0.25rem;
  padding: 12px 24px;
  color: #fff;
  background: #3b82f6;
みたいボタンを作りたいときは以下のように書く
 -->
<button class="border border-solid border-black py-3 px-6 text-white bg-indigo-600">ボタン</button>

まずはVue Cliをインストールしてプロジェクトフォルダを作る

vue3・vue-router（historyモード）を使用するので、マニュアルでプロジェクトを作成。

Vue Cliのインストールからプロジェクト作成までがわからない方はこの記事を参照にするといいかも。
https://qiita.com/ITmanbow/items/9ea7d3f5a9219d760d0c

Tailwind CSSのインストール

Vue Cliではpluguinでインストールができます。
最新バージョンはvueでサポートがされてないので、公式の記事を参照にして旧バージョンをインストールします。

npm install -D Tailwindcss@npm:@Tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

次にconfigファイルを生成します。

npx Tailwindcss init -p

完了すると、Tailwind.config.jsが作成されるので、以下の内容を記述します。

Tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最後にpostcss.config.jsを手動で作成し、以下の内容を記述します。

postcss.config.js

module.exports = {
  plugins: {
    Tailwindcss: {},
    autoprefixer: {},
  },
}

これでVue CliにおけるTailwind ＣSSのインストールは完了です。

Tailwind CSSを読み込む

インストールが完了したら、使えるように読み込んでいきます。
まずは、任意の場所にCSSファイルを作成し、以下の内容を記述します。

EX-/src/assets/css/Tailwind.css

@Tailwind base;
@Tailwind components;
@Tailwind utilities;

次にmain.jsにTailwind CSSを読み込む記述を追加します。

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

// tailewind css
import '@/assets/css/Tailwind.css';

これで準備完了です。Vue CliでTailwind CSSを使えるようになりました。