JavaScriptに関するお知らせ

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

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


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

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

これ!

<div>
  <div class="h-full w-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;
}

クリッカブルな要素

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

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

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

コンテナの中央寄せ

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

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

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

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

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

文字の上下中央寄せ

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

一応使用例はこれ

<div class="h-10 leading-10">この文字は上下中央寄せです</div>

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

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

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

<div class="flex 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>

すげー簡単。これバニラcssでやったらどんだけ大変なんだろ。ってくらい簡単。

これの最初の<main>containermx-autoを付けるようなデザインパターンはよくやります。

さいごに

tailwind最高。こんなフレームワークを待ってた。tailwindだけであと3本は書きたいです。以上。



ブログをNuxt.jsからHugoに移行し、さらにGatsby.jsに移行した話
PREV
2020-04-29
ブログをNuxt.jsからHugoに移行し、さらにGatsby.jsに移行した話

【CSS】CSSフレームワーク不要派の人ほどtailwind.cssにハマる理由
NEXT
2020-05-05
【CSS】CSSフレームワーク不要派の人ほどtailwind.cssにハマる理由