Vue3 todoアプリ作成③ ~ Tailwind CSS導入 ~

Tailwind CSS いれてみた

謎todoアプリ作成 第3弾

todoアプリ作ってみたのですが、cssも何も当てずに進めていたのでこの辺で
cssぶっ込みたいと思いtailwindcssの所感も試したくなったため入れてみました。

Vue3 todoアプリ作成① ~ compositionAPI ~
Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~
Vue3 todoアプリ作成③ ~ Tailwind CSS 使ってみた ~ 今ここ

インストール/設定

terminal

$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

// tailwind.config.js postcss.config.js 生成
$ npx tailwindcss init -p

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

src/index.css

/*! @import */          /*! コメントアウトの記述も忘れず！ */
@tailwind base;
@tailwind components;
@tailwind utilities;

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

これでセットアップは完了です！
Vscodeを使用してる方はTailwind CSS IntelliSenseという拡張をいれるのがおすすめです。
予測変換など補強機能を使用することができます！

実際に書いてみる

src/App.vue

<template>
    <div class="h-screen flex justify-between flex-col">
    <router-link to="/">
      <h1 class="h-24 p-3 flex items-center bg-green-500 text-white text-2xl font-bold"> TODO APP composition API </h1>
    </router-link>
    <router-view></router-view>
  </div>

</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
})
</script>

コードの2行目に

src/App.vue

<div class="h-screen flex justify-between flex-col">

と書かれています。
こちらがcssへ変換させると
h-screen => height: 100vh;
flex => display: flex;
justify => justify-content: space-between:
flex-col => flex-direction: column;
このようになります。

記述量が圧倒的に減りましたね。これがTailwindの良い点と感じられます。

補足

src/App.vue

<div class="h-screen flex justify-between flex-col">

の指定しているユーティリティクラス(h-screen flex justify-between flex-col)を
まとめて新規のクラスを作成することができる。

src/App.vue

<template>
    <div class="headerBox"> //headerBoxへ変更
      <router-link to="/">
        <h1 class="h-24 p-3 flex items-center bg-green-500 text-white text-2xl font-bold"> TODO APP composition API </h1>
      </router-link>
    <router-view></router-view>
  </div>

</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
})
</script>

//追加
<style>
  .headerBox{
    @apply h-screen flex justify-between flex-col;
  }
</style>

@applyを使用することで独自のカスタムCSSを作成することができます。
component内で同じユーティリティクラスを使用する際に、
このようにまとめておくとより記述量が減らせそうですね。

ユーティリティ対応クラスがない場合

例 margin: 5pxを設定したい。
marginのユーティリティクラスの中には基本的にはpxで指定されていません。
※基本細い数値のユーティリティクラスはないです。

なのでその場合は、tailwind.config.js をカスタムすると使用できるようになります。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      margin: {
        '5px': '5px'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

theme内のextendでmarginと指定するとmarginのユーティリティクラスをカスタムすることができるようになります。

任意の名前:値とすると追加完了です。

今回のパターンですと

src/App.vue

<div class="margin-5px">

とするとmargin: 5pxが反映されます。

擬似クラス

:hoverや:focusといった擬似クラスは

src/App.vue

<div class="margin-5px focus:margin-0"> // focus:margin-0追加

とするとfocus時に　margin: 0pxが適応されます。

ただlast-childなど対応されていないものも存在します。
こういった場合もtailwind.config.js をカスタムすると使用できるようになります。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      margin: {
        '5px': '5px'
      }
    },
  },
  variants: {
    extend: {
      margin: ['last'],
    },
  plugins: [],
}

今度はvariantsの中のextendの中身にmargin: ['last'],を追加できました。
こうすることでmarign ユーティリティクラスに対して last-childが適応されます。

src/App.vue

<div class="margin-5px last:margin-0"> // last:margin-0追加

とすることで last-child marign: 0pxとなります！

おわり

CSS抜きだとアプリがどうしてもしょぼく見えてしまったので、
今回Tailwindを使ってみましたが、使えば使うほど楽しくなってくる印象でした。
ドキュメントも充実しているので、ほぼそれを見れば対応はできるかと思われます。

これはTailwindに限らずとはお思いますが
大規模で開発を行う際はある程度ルールを決めておくと良さそうですね。

参考

[Tailwind CSS ドキュメント] (https://tailwindcss.com/)
初めてのtailwindcss (Vue.js + PurgeCSS)
Githubコード