今日は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しか使用されていないことが確認できますね。

お疲れ様でした。