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

# Tailwind CSS いれてみた

謎todoアプリ作成 第3弾

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

[Vue3 todoアプリ作成① ~ compositionAPI ~](https://qiita.com/nakamo-03/items/5f1a8283648f87ab0230) 
[Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~](https://qiita.com/nakamo-03/items/f5a559d89264a6a2b011) 
[Vue3 todoアプリ作成③ ~ Tailwind CSS 使ってみた ~ ](https://qiita.com/nakamo-03/items/23320776e7a80b4038e6) :point_left:今ここ


## インストール/設定

```terminal: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
```

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

```

```css: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](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)という拡張をいれるのがおすすめです。
予測変換など補強機能を使用することができます！

## 実際に書いてみる

```vuejs: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行目に

```vue: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の良い点と感じられます。

#### 補足

```vue:src/App.vue
<div class="h-screen flex justify-between flex-col">
```
の指定しているユーティリティクラス(`h-screen flex justify-between flex-col`)を
まとめて新規のクラスを作成することができる。


```vuejs: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 をカスタムすると使用できるようになります。

```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のユーティリティクラスをカスタムすることができるようになります。

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

今回のパターンですと

```vue:src/App.vue
<div class="margin-5px">
```
とするとmargin: 5pxが反映されます。

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

```vue:src/App.vue
<div class="margin-5px focus:margin-0"> // focus:margin-0追加
```

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

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

```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が適応されます。

```vue: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)](https://qiita.com/hisako135/items/49c05633de4dadfcd627)
[Githubコード](https://github.com/nakamotoyuto/vite-study)