Tailwind: メディアクエリに垂直方向のスクリーンサイズを追加する（翻訳）

Tailwind: メディアクエリに垂直方向のスクリーンサイズを追加する（翻訳）

私はTailwindを学んでみて初めて、自分にもWeb上で精密かつメンテナンス性の高いビジュアル表現が行えるんだという気持ちになれました。私はもうTailwindに惚れ込んでしまいました。
普段CSSを書いているけどTailwindを使ったことがない人は、ぜひ数日かけてTailwindを触ってみましょう。そして初期の学習曲線を乗り越えましょう。

Tailwindで私が大好きな点の1つは、非常に拡張性が高いことです。Tailwindのユーティリティクラスには、レスポンシブデザインをサポートするための画面サイズも装備されていますが、垂直方向の画面サイズは含まれていません。もっとも垂直方向の画面サイズは普段使うものではないので、なくても不思議ではありません。

しかし、スマホを横向きにしたときにもWebアプリが使えるようにしたことはありますか？ブラウザのツールバーの分を考慮すれば、画面の上下方向の長さは文字通り正味330ピクセルしかないでしょう。やったことのある方なら、画面の高さが極端に短い場合にレスポンシブデザインを変えたくなる気持ちはおわかりでしょう。

Tailwindでこのスタイルを追加するのにかかった時間は、上のパラグラフを書くよりも短く済みました。私のtailwind.config.jsに追加したのは以下のとおりです。

module.exports = {
  theme: {
    extend: {
      screens: {
        short: { raw: '(max-height: 400px)' },
        tall: { raw: '(min-height: 401px and max-height: 600px)' },
        grande: { raw: '(min-height: 601px and max-height: 800px)' },
        venti: { raw: '(min-height: 801px)' }
      }
    }
  }
}

たったこれだけで、高さが極端に短い画面で要素を非表示にしたり、UIを小さくするという目標を達成できました。そういう画面でロゴを非表示にしたい場合は以下のように書きます。

<img class="w-6 short:hidden" src="/logo.png">

惜しい点

残念ながら、Tailwindでオープン中のissue #13022のため、rawを使っている画面がmax-sm:などのバリアントで意図せず壊れてしまいます。そこで、当面の回避策として、これらを以下のように自分で定義することにします。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      screens: {
        short: { raw: '(max-height: 400px)' },
        tall: { raw: '(min-height: 401px and max-height: 600px)' },
        grande: { raw: '(min-height: 601px and max-height: 800px)' },
        venti: { raw: '(min-height: 801px)' },

        // Manually generate max-<size> classes due to this bug https://github.com/tailwindlabs/tailwindcss/issues/13022
        'max-sm': { raw: `not all and (min-width: ${defaultTheme.screens.sm})` },
        'max-md': { raw: `not all and (min-width: ${defaultTheme.screens.md})` },
        'max-lg': { raw: `not all and (min-width: ${defaultTheme.screens.lg})` },
        'max-xl': { raw: `not all and (min-width: ${defaultTheme.screens.xl})` },
        'max-2xl': { raw: `not all and (min-width: ${defaultTheme.screens['2xl']})` },
      }
    }
  }
}

最初にお見せしたTailwindほど完璧とはいきませんが、それでも自分としてはかなり満足しています。

関連記事

CSS: z-indexの問題はisolationプロパティで解決できる（翻訳）

Tailwind CSS: 開発者が知っておきたいデリケートなUIデザインの便利技11種（翻訳）

The post Tailwind: メディアクエリに垂直方向のスクリーンサイズを追加する（翻訳） first appeared on TechRacho.