Tailwindcss いれてみた
謎todoアプリ作成 第3弾
todoアプリ作ってみたのですが、cssも何も当てずに進めていたのでこの辺で
cssぶっ込みたいと思いtailwindcssの所感も試したくなったため入れてみました。
Vue3 todoアプリ作成① ~ compositionAPI ~
Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~
Vue3 todoアプリ作成③ ~ tailwindcss 使ってみた ~ 
今ここ
インストール/設定
$npm install-D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
// tailwind.config.js postcss.config.js 生成
$npx tailwindcss init -pmodule.exports={purge:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],darkMode:false,// or 'media' or 'class'theme:{extend:{},},variants:{extend:{},},plugins:[],}/*! @import *//*! コメントアウトの記述も忘れず！ */@tailwindbase;@tailwindcomponents;@tailwindutilities;#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><divclass="h-screen flex justify-between flex-col"><router-linkto="/"><h1class="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'exportdefaultdefineComponent({name:'App',})</script>コードの2行目に
<divclass="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の良い点と感じられます。
補足
<divclass="h-screen flex justify-between flex-col">の指定しているユーティリティクラス(h-screen flex justify-between flex-col)を
まとめて新規のクラスを作成することができる。
<template><divclass="headerBox"> //headerBoxへ変更
<router-linkto="/"><h1class="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'exportdefaultdefineComponent({name:'App',})</script>
//追加
<style>.headerBox{@applyh-screenflexjustify-betweenflex-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のユーティリティクラスをカスタムすることができるようになります。
任意の名前:値とすると追加完了です。
今回のパターンですと
<divclass="margin-5px">とするとmargin: 5pxが反映されます。
擬似クラス
:hoverや:focusといった擬似クラスは
<divclass="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が適応されます。
<divclass="margin-5px last:margin-0"> // last:margin-0追加
とすることで last-child marign: 0pxとなります！
おわり
CSS抜きだとアプリがどうしてもしょぼく見えてしまったので、
今回Tailwindを使ってみましたが、使えば使うほど楽しくなってくる印象でした。
ドキュメントも充実しているので、ほぼそれを見れば対応はできるかと思われます。
これはTailwindに限らずとはお思いますが
大規模で開発を行う際はある程度ルールを決めておくと良さそうですね。