Zenn
💨

TailwindCSS で モバイル縦画面表示時のみ消える要素を作る

2020/11/26に公開
Tailwind CSS
tech

豆知識的な。

TL;DR

  • TailswindCSS はモバイルファースト
  • モバイルではどうか、指定したブレークポイント以上ではどうなるか、で指定する
  • つまりモバイル縦画面の時（画面幅が小さい時）だけ消える表示にするにはこう
    • <div class="invisible md:visible"></div>
    • <div class="hidden md:inline-block"></div>

モバイル縦画面表示時のみ消える要素を用意したかった

モバイル縦画面表示時（画面幅が小さい時）だけ消えるinput要素とかありますよね。
例えばYoutubeをブラウザで開いた時の検索の入力欄とかです。

モバイル縦画面表示時

PC or ランドスケープ表示時

[検索　　　　　　] という要素(と検索ボタン）の表示が変わってるのがわかると思います。

これを TailwindCSS でスッとやるにはどうするか調べました。

TailwindCSS は「モバイルファースト」

ここに

By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.
What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.
(以下訳)
デフォルトでは、Tailwindはモバイルファーストのブレークポイントシステムを使用しています。
これが意味するのは、接頭辞なしのユーティリティ（大文字など）はすべての画面サイズで効果を発揮し、接頭辞付きのユーティリティ（md:uppercaseなど）は指定されたブレークポイント以上でのみ効果を発揮するということです。

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version
(以下訳)
このアプローチで最も人々を驚かせるのは、モバイル用に何かをスタイル化するには、sm：プレフィックス版ではなく、接頭辞なしのユーティリティを使う必要があるということです。

とあるように、基本的な考え方としては以下となります。

  • モバイルではどうなるのか
  • 指定したブレークポイント以上ではどうなるのか

それを元にモバイル縦画面表示時のみ消える要素を作るために
TailwindCSS のclass定義を適用すると例えば

<div class="invisible md:visible"></div>
<div class="hidden md:inline-block"></div>

visible を使うか display:none を使うかはそのときの要件次第ですね。
このようになります。考え方がわかれば難しいことではないですね。

補足：JavaScript での制御を同期させるには

ボタンの表示/非表示とボタンクリック時の挙動も TailwindCSS だけで制御できます（※1）が、
もしJavaScriptでの制御を md: プレフィックスのついた挙動と合わせるにはどうするのがいいでしょうか。

簡単です。md: プレフィックスの Minimum width は
デフォルトでは 768px (CSS 的には @media (min-width: 768px) { ... } なので
以下のような条件で制御できます。

if (window.matchMedia('(min-width:768px)').matches) {
  // md: prefix がついた状態のときの挙動
}

※1

Discussion