Vue.js + Tailwind CSS（v4） の導入方法

やりたかったこと

Vue.js で Todo アプリを作るにあたり、スタイリングを Tailwind CSS で行いたくて、ChatGPTに聞きながら導入を進めました。
しかし、返ってくる答えは Tailwind CSS v3 向けの手順ばかりで、設定を何度もやり直すハメに…。

この記事では「Vue + Tailwind CSS v4」の導入方法をご紹介します。

使用環境

• Node.js v20.12.2
• npm v10.5.0
• Vite v6.3.5
• Vue v3.5.13
• Tailwind CSS v4

---

1. プロジェクトの作成

// アプリを作成したいディレクトリに移動後

npm create vite@latest vue-my-todolist -- --template vue
cd vue-my-todolist
npm install

2. Tailwind CSS のインストール

npm install tailwindcss @tailwindcss/vite

※v4 では autoprefixer や postcss は不要

3. Vite 設定ファイルの編集

// vite.config.js または vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' ← 追加

export default defineConfig({
  plugins: [vue(), tailwindcss()],　← 追加
})

上記の2行を追加

4. style.css ファイル の編集

@import "tailwindcss";

cssファイルのどこに記述してもOK!

5. main.js に CSS を読み込む

// src/main.js

import './assets/main.css'

ハマったポイント

1.npx tailwindcss init -p がエラーになる

npm ERR! could not determine executable to run

→ Tailwind CSS v4 では CLI の代わりに Vite プラグインを使うのが基本。
設定ファイル（tailwind.config.js）が必須ではない。

2.@tailwind base; などは不要

→ v4からは @import "tailwindcss"; だけでOK。
旧バージョン（v3）記事が多く、混乱しがち。

3.autoprefixer, postcss-import も不要

→ v4では内部処理されるのでインストール不要。

---

まとめ

• Tailwind CSS v4では CLIではなく Vite プラグインを使う
• スタイルの記述は @import "tailwindcss"; だけでシンプル
• 公式ドキュメントも v3とv4で内容が大きく異なる ので注意！

---