今日はViteのビルドツールを使ってVue3とtailwindCSSのセットアップの仕方を紹介します。
すでにTailinwdCSSを使ったことがある方ならその良さをVueで発揮したいですよね?TailwindCSSは軽量でさらにデプロイの際に使用していないCSSをファイルから除くことができる優れたユーティリティライブラリです。
GitHubからソースコードを参照してください。
Vueのプロジェクトのセットアップ
npm create vite@latest ✔ Project name: … tailwind-starter ✔ Select a framework: › Vue ✔ Select a variant: › JavaScript Scaffolding project in /home/dan/Documents/public/tailwind-starter... Done. Now run: cd tailwind-starter npm install npm run dev
ではcdのコマンドでプロジェクトのディレクトリに移動してnodeのモジュールをインストールします。
Tailwind CSSのセットアップ
Node.js 12.13.0より新しいバージョンであることを確認してください。
node -v #結果 v18.14.2
ではTailwindCSSをインストールします。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
次にTailwindcssをイニシャライズしてコンフィグファイルを生成します。
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も自動で作成されていることを確認します。ちなみにnode.jsでエラーが出る場合はファイル名をpostcss.config.cjsに変えると直ります。
// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
使用されていないスタイルを除くには:
tailwind.config.jsにあるpurge(パージ)オプションにコンパイルしたcssファイルを出力したいパスを指定します。
// tailwind.config.js module.exports = { purge: [], purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
次にassets/styles.cssなどのようにグローバルで使用したいCSSファイルを作成し、下記の様にtailwindcssをインポートします。
@tailwind base; @tailwind components; @tailwind utilities;
次にmain.jsからVueアプリの生成時に上記のcssファイルをインポートするように指示します。
main.js
import { createApp } from 'vue' import './assets/style.css' import App from './App.vue' createApp(App).mount('#app')
では最後にApp.vueにtailwindCSSのclassを使ってスタイリングをしてみます。
<template> <h1 class="text-3xl">Hello World</h1> </template>
これでテスト用のウェブサーバーを起動するとスタイリングがアプライされたことが確認できますね。
npm run dev
デプロイの際には
下記のコマンドでvueアプリをデプロイ用にビルドします。
npm run build #ビルドしたファイルをプレビュー npm run preview
これでブラウザの検証ツールから確認すると最小限のCSSしか使用されていないことが確認できますね。

お疲れ様でした。