Vue CLI に tailwind を導入

ディレクトリ構成

node_modules/
public/
    ├─ index.html
    └─ output.css
src/
    ├─ assets/
           └─ css/
                  └─ input.css
    ├─ components/
           └─ HelloWorld.vue
    ├─ App.vue
    └─ main.ts
package.json
tailwind.config.js
vue.config.js

tailwind インストール

npm install -D tailwindcss
npx tailwindcss init

tailwind 初期設定

tailwind.config.js

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

input.css の作成

src/assets/css/input.css を作成

input.css

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

package.json に scripts 追記

これで、 npm run serve するだけで tailwind のビルドも一緒に走るようになる

"scripts": {
+ "serve": "npm run watch:tailwind & vue-cli-service serve",
+ "watch:tailwind": "npx tailwindcss -i ./src/assets/css/input.css -o ./public/output.css --watch",
+ "build": "npm run build:tailwind & vue-cli-service build",
+ "build:tailwind": "npx tailwindcss -i ./src/assets/css/input.css -o ./public/output.css",
"lint": "vue-cli-service lint"
},

npm run watch:tailwind を実行して、public/output.css が生成されるか確認する

main.ts にて css 読み込み

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

// tailwind
+ require("../public/output.css");

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

tailwind が反映されるか確認

npm run serve を実行

適当にHelloWorld.vue を書き換えて tailwind の class を記述し反映されるか確認

HelloWorld.vue

<template>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
  <button class="bg-green-500 font-semibold text-white py-2 px-4 rounded">
    ボタン
  </button>
</template>

反映されていれば、OK

参考