2020-04-30

【CSS】tailwind.cssでよく使うデザインパターン

こんにちは！最近tailwind.cssにドハマりしている Mizutani(@sirycity) です。今日はtailwindで個人的によく使うデザインパターンを羅列します :)

親要素から縦横の幅を引き継ぐ

これ！

<div>
  <div class='w-full h-full'>
  僕は親要素と同じ幅と高さだよ！
  </div>
</div>

普通のcssで書くとこう。

{
  width: 100%;
  height: 100%;
}

ようはまあ、widthとheightを100%にするだけなんだけど、ほんとによく使います。

とりあえず心配ならw-full h-full。ちなみにtailwindにはwidth: inheritはありませんのでinherit派は注意。

余談(100%とinheritの違いについて)

親要素のwidthが100px、子要素が50%、孫要素が100%だと孫要素の長さは50px。
親要素のwidthが100px、子要素が50%、孫要素がinheritだと孫要素の長さは25px。

↑この例わかりやすい。自画自賛。1個上が相対指定だと挙動が変わるってことです。

インラインブロック

これも至ってシンプル。よく使う。

<div class='inline-block'>
僕はインラインブロックです。
</div>

これとおなじ。

{
  display: inline-block;
}

そういえばデフォルトでinline-blockのHTMLタグはありませんね。

個人的には全てがインラインブロックになって欲しい。ちなみにこれ↓で全部インラインブロックになる。やらないけど。

* {
  display: inline-block;
}

tailwind.cssで特に使ってるのが
- width: 100%
- height: 100%
- display: inline-block
の3つかな？体感だけど、自分の場合この3つが一瞬で指定できるってのが開発効率を上げてる要因な気がする(ここまでやるとちょっとやりすぎだけど) #tailwindcss #css pic.twitter.com/AfftVXjlVl
— Mizutani@フロントエンドエンジニア (@sirycity) May 28, 2020

クリッカブルな要素

<a> とか <div onclick> とか。クリックすると何かが起こる系にはとりあえずこれ。

<a class='hover:opacity-75'>
リンク
</a>

これ書いとくだけでもUIのレベルだいぶ上がる。もっと凝るならhover:の後に色々入れると良いと思う。

コンテナの中央寄せ

ページの基になるコンテナを中央寄せする。

<main class='container mx-auto'>
この中に色々書く
</main>

こんだけ。ページ全体を覆うと良いと思います。

tailwindのコンテナは便利。ちなみに、コンテナって名前だけどページ全体を覆う1箇所だけでしか使えないなんてルールはないです。

私はわりと各所でcontainerを乱発します。

文字の上下中央寄せ

これも使うんだけど、数少ないtailwindに物申したいポイント。

一応使用例はこれ

<div class='w-10 h-10 leading-10 text-center'>
  この文字は上下中央寄せです。(w-10の部分はいくつでもいいよ)
</div>

leadingはline-heightです。なんですが、leadingは3~~10までしかありません... heightは0~~64まであるのに...

heightとline-heightを同じ値にすると、改行なしの文字列を上下揃えにできます。text-centerの左右揃えと併せて手軽に上下左右中央寄せにできるテクニック...なんだけど、あんまり使われないみたい。個人的にはすごい使うテクニックだけどまあ元々line-heightは行間揃えだししゃーない

上下左右揃えに関してはflexの方が有名ですね。こちら

<div class='w-10 h-10 flex justify-center items-center'>
  この文字は上下中央寄せです。flexの方がちょっと表記が長い。
</div>

PCで2カラム、スマホで1カラム

これはtailwindに限ったことじゃないけど、tailwind使うとまじ簡単にできる。ご覧あれ。

<main class='flex flex-wrap'>
  <article class='w-full lg:w-1/2'>
    ここはPCだと2カラムの左側、スマホだと1カラムになります
  </article>
  <aside class='w-full lg:w-1/2'>
    ここはPCだと2カラムの右側、スマホだと1カラムになります
  </aside>
</main>