VueとTailwindv4.0でフロント画面を構築する

Vueと今年の1月23日にリリースされたばかりのTailwindv4.0を使って簡単にフロントを構築してみる。

v3との違い

• 完全ビルドが3.5倍、高速な増分ビルドは8倍以上
• セットアップが簡単に
• .gitignoreが自動的に追加される
• JavaScriptファイルいらず、CSSだけでカスタマイズできる ... etc

詳しくは公式ブログを見てください。

プロジェクト作成の準備

1. フォルダを作成

mkdir プロジェクト名

2.Nodeのバージョン確認

バージョンが古すぎると動かない、v18以上がいいかも。

node -v

もし入っていない場合はmacだったらbrew install nodeとか
Node公式サイトからインストールしてください。

ちなみに私はv20.18.1を使用しています。

3.asdfでローカル環境にNodeを設定(使っている場合)

asdf local nodejs 使いたいnodeのバージョン

これで.tool-versionsというファイルが作成され、ディレクトリごとにNode.jsのバージョンを管理できます。

VSCodeとかでフォルダの中に入ってターミナルで操作

Vueプロジェクトの作成

npm create vue@latest 作成するVueプロジェクトの名前

yでcreate-vueをインストールを許可、あとはEnterを押して進める。
プロジェクトディレクトリに移動して、VSCodeなどで開く。

Tailwind CSS v4のインストール

npm install tailwindcss @tailwindcss/vite

Vite の設定ファイルを編集

vite.config.jsを以下のように編集。

vite.config.js

import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(), //追加
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Tailwind のスタイルを読み込む

1.src/style.css を作成し、以下を記述

style.css

@import "tailwindcss";

2.main.js にインポートを追加

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import './style.css' // ← これを追加

createApp(App).mount('#app')

起動して確認

npm run dev

Tailwind が反映されているか確認

App.vue

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
    <!-- テスト用のtailwindsを追加 -->
    <div class="bg-purple-400 text-white text-xl">
      これはTailwindv4でつくられました!
    </div> 
  </header> 

こんな感じで紫の部分が表示されれば成功です！🎉