Zenn
🗂

【WEB開発】Vue.js + TailWind CSS　導入編

2021/07/30に公開
CSS
JavaScript
Vue.js
Tailwind CSS
tech

メインビジュアル

執筆に至った経緯

統計を調べた時に世界で流行しているCSSフレームワークという事もあり、日本でもちらほら話題に上がってきているので学んでおいて損はないと感じたからです。
State of CSS 2020
出典：State of CSS 2020

導入環境

【WEB開発】Vue.js開発環境を作ろう 導入編で作ったミニマム環境に導入していきます。
TailWind CSSの紹介だけでなく、Vue.jsの拡張性についても触れていきます。

導入

早速Viteで作成したVue環境にTailWind CSSを導入していきます。
TailWind CSS Vue3に導入ガイド
公式のリファレンスに従ってセットアップしていきます。

TailWind CSSのインストール

インストールするものは下記３つ

  • tailwindcss
  • postcss
  • autoprefixer

同時にインストールするコマンドが下記になります

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイル（configuration files）の作成

下記コマンドでtailwindの設定ファイルとpostcssの設定ファイル２つが生成されま。

npx tailwindcss init -p
  • tailwind.config.js
  • postcss.config.js

tailwind.config.js

tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

本番環境で未使用のスタイルを削除

tailwind.config.jsのpurge部分を修正

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: [],
}

Tailwindをプロジェクトに含める

プロジェクトの./src/にindex.cssファイルを作成し下記内容を記述する事で
base、componentsとutilitiesスタイルの元ファイルの内容を置き換えなす。

./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwindは、ビルド時にこれらのディレクティブを構成された設計システムに基づいて生成するすべてのスタイルと交換します。

CSSファイルのインポート

./src/main.jsに./src/index.cssをインポートする事でプロジェクトにTailwindが導入されます。

./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css' //ここを追記

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

導入確認

Tailwindが動いているかを確認する。
ローカル環境を起動

ローカル環境
見事にレイアウトが崩れています。
これはTailwindをプロジェクトに含める時に元ファイルを置き換えているので当然の結果になります。

ロゴを中央に戻す。

ロゴが左に寄っているのがきになるのでmargin:autoのstyleを指定して戻す事にします。

tailwindcomponentsでmargin:autoを設定できるclassを探します。
どうやら.m-autoを指定してあげると良いとの事なので早速実装します。

./src/App.vue
<template>
  <img alt="Vue logo" class="m-auto" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修正後
しっかりロゴが中央に戻ってきています。
よってTailwindが動いてる事が確認できましたので導入は以上となります。

Discussion