こんにちは。つばさです。

ずっとエルデンリングやってます。神ゲーすぎる。

それはさておき、前回の続きを書きたいと思います。今回で最後です。

ViteでVue3 + VueRouter + TailwindCSSの環境をつくる②

TailwindCSSを使えるようにしたいと思います。

公式サイトをもとに設定していきます。

まずはTailwindCSSと必要なものをインストールします。

npm install -D tailwindcss postcss autoprefixer

下記コマンドを実行して、設定ファイル（tailwind.config.js, postcss.config.js）を生成します。

npx tailwindcss init -p

tailwind.config.jsにテンプレートファイルのパスを追加します。（Ver3になって変わってる…）

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

./src/index.cssファイルを新規作成します。作成した後、下記のように記述します。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

./src/main.jsにimport ‘./index.css’を追記します。

// skl-blog/src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import './index.css'; //追記


createApp(App).use(router).mount("#app");

 動作確認します。

npm run dev

http://localhost:3000/をブラウザで確認します。

下記の画像のようになっていれば、とりあえずおｋです。

試しにボタンを作ります。TailwindCSSでは、基本的にすべてclass属性に書きます。

cssファイルでクラスは基本的に作成しません。

Home.vueにボタンを作ってみます。

試しにbootstrap5のボタンを作ってみましょう。

まずは、白文字・青背景・パディングを設定します。

<button class="text-white bg-blue-500 py-2 px-3">Primary</button>

<button class="text-white bg-blue-500 py-2 px-3 rounded">Primary</button>

<button class="text-white bg-blue-500 py-2 px-3 rounded hover:bg-blue-800">Primary</button>

<button type="button" class="btn btn-primary">Primary</button>

ボタンに関しては、よく使うので共通化したほうがいいでしょう。（TailwindCSSにはちゃんと共通化の機能もあります。）

TailwindCSSのメリットとしては、

• クラス名を考える必要がない
• htmlをみれば、どのようなCSSの設定をしているかわかりやすい
• 自由度が高い（細かく背景色を設定したい場合は、「bg-[#999]」みたいに書く。ほかのプロパティ（パディングなど）も同様に可能）
• ビルド時に実際に使用しているクラスしかビルドされない（tailwind.config.jsのconfigで設定したファイルに記載されているクラス名。cssの読み込みが早くなる。）

デメリットというか注意点としては、

• CSSをそれなりに理解していないと使えない（Bootstrapなどは、わからなくてもなんとなくいい感じに作れる）
• 使える環境を構築しないといけない

詳しくは、公式ドキュメントを見てください。

いろいろできるので面白いです。

以上でこの「ViteでVue3 + VueRouter + TailwindCSSの環境をつくる」は終わりです。

viteはvue-cliに比べて、ビルドが軽いので快適に開発ができるので、最近はずっとViteをつかっています。

環境構築も難しくはないので、みなさんも試してみてください。