Tailwind CSS いれてみた
謎todoアプリ作成 第3弾
todoアプリ作ってみたのですが、cssも何も当てずに進めていたのでこの辺で
cssぶっ込みたいと思いtailwindcssの所感も試したくなったため入れてみました。
Vue3 todoアプリ作成① ~ compositionAPI ~
Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~
Vue3 todoアプリ作成③ ~ Tailwind CSS 使ってみた ~ 
今ここ
インストール/設定
$ 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
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
/*! @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という拡張をいれるのがおすすめです。
予測変換など補強機能を使用することができます！
実際に書いてみる
<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行目に
<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の良い点と感じられます。
補足
<div class="h-screen flex justify-between flex-col">
の指定しているユーティリティクラス(h-screen flex justify-between flex-col)を
まとめて新規のクラスを作成することができる。
<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 をカスタムすると使用できるようになります。
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のユーティリティクラスをカスタムすることができるようになります。
任意の名前:値とすると追加完了です。
今回のパターンですと
<div class="margin-5px">
とするとmargin: 5pxが反映されます。
擬似クラス
:hoverや:focusといった擬似クラスは
<div class="margin-5px focus:margin-0"> // focus:margin-0追加
とするとfocus時に margin: 0pxが適応されます。
ただlast-childなど対応されていないものも存在します。
こういった場合も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が適応されます。
<div class="margin-5px last:margin-0"> // last:margin-0追加
とすることで last-child marign: 0pxとなります！
おわり
CSS抜きだとアプリがどうしてもしょぼく見えてしまったので、
今回Tailwindを使ってみましたが、使えば使うほど楽しくなってくる印象でした。
ドキュメントも充実しているので、ほぼそれを見れば対応はできるかと思われます。
これはTailwindに限らずとはお思いますが
大規模で開発を行う際はある程度ルールを決めておくと良さそうですね。
参考
Tailwind CSS ドキュメント
初めてのtailwindcss (Vue.js + PurgeCSS)
Githubコード