About
本サイトについて
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
プロフィール
kght6123
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
Vue3 に、爆速の Tailwind CSS を導入したいと考えている方へ!
Tailwind CSS v2.2.0 で、 Tailwind CLI が新しく導入されました。
その CLI ツールを使って、Vue3 + Vite の環境に Tailwind CSS (JIT モード) を導入する部分をご紹介しようと思います。
ユーティリティ・ファーストの低レベルな CSS ライブラリです。
Bootstrap や Vuetify、ElementUI の様に決まった UI ではなく オリジナルの UI を爆速で作れます。
設定ファイルを変更することで、 Tailwind CSS のほぼ全てをカスタマイズできます。
Tailwind CSS v2.2.0 から新たに追加されたツールです。
Tailwind CLI のビルド機能を利用することで、 プロジェクトに Tailwind.css をインストールして設定しなくても Tailwind.css をビルドして利用できます。
また、今までの postcss コマンドよりパフォーマンスが最適化された JIT モードを利用できます。
Tailwind CSS は v2.2.0 以降が必要です。
$ npm init @vitejs/app sample-application
✔ *Select a framework:* › vue
✔ *Select a variant:* › vue
$ cd sample-application
$ npm install
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npm install -D npm-run-all
$ npx tailwindcss init
// tailwind.config.js
+ mode: 'jit',
- purge: [],
+ purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
/* src/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// src/main.js
+ import "./tailwind.dist.css";
npm-run-all を利用して、 dev: で始まる全ての scripts を並列で実行します。
// package.json
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:server": "vite",
"dev:css": "tailwindcss -i src/assets/css/tailwind.css -o src/tailwind.dist.css -w",
"build": "tailwindcss -i src/assets/css/tailwind.css -o src/tailwind.dist.css && vite build",
"build:prod": "NODE_ENV=production npx tailwindcss -i src/
assets/css/tailwind.css -o src/tailwind.dist.css --minify &&
vite build",
"serve": "vite preview",
"clean": "npx clear-npx-cache"
},
clean コマンドは、npx コマンドの cache 削除用です。 古いバージョンの Tailwind CSS が実行されてしまい、エラーになる場合に実行してください。
HelloWorld.vue の class を書き換えます。
<!-- src/components/HelloWorld.vue -->
<template>
<h1 class="bg-red-400">{{ msg }}</h1>
<p class="bg-[#1da1f1]">
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" class="bg-yellow-500" @click="state.count++">
count is: {{ state.count }}
</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script setup>
import { defineProps, reactive } from "vue";
defineProps({
msg: String,
});
const state = reactive({ count: 0 });
</script>
<style scoped>
a {
color: #42b983;
}
</style>
爆速(1〜2 秒ほど)で、dev サーバが立ち上がります。
$ npm run dev
# http://localhost:3000/
# Ctrl + C で停止
下記のように、Hello World の画面が表示されば、OK です。
下記のコマンドで、tailwindcss や vite をアップデートしてください。
# 既存のvue3を対応するとき
$ npm update tailwindcss # v2.2.2以降へ
$ npm update vite # v2.3.8以降へ
その後、手順の 3 から、実行してください。
すでにファイルを作成したり、修正している箇所は読み飛ばしてください。
Tailwind CLI を利用して、新しく Vue3 のプロジェクトを作成してみました。
驚くほど、爆速で開発環境が立ち上がり、とても快適に開発が可能なので、ぜひ、一度、お試しください 🙏
最後まで読んでいただき、ありがとうございました。
https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.2.0
https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.1.0