Tailwind CSSだけでモバイル向けスタイリングを実現する方法

モバイルデバイス向けのスタイリングを行う際、JavaScriptを使った判定を避け、CSSのみで完結させる方法を紹介します。本記事では、Tailwind CSSにカスタムプラグインを追加することで、簡潔にモバイルスタイリングを実現する方法を解説します。

---

モバイル判定をCSSだけで実現する背景

モバイルデバイスの判定は、JavaScriptを用いた以下のような方法が一般的です。

"ontouchstart" in window || navigator.maxTouchPoints > 0;

また、ReactではuseContextを用いて判定結果をコンポーネント全体に渡し、一元管理することでメンテナンス性を高めるアプローチも可能です。しかし、これらの方法には以下の課題があります：

1. UIロジックの煩雑化
   useContextを用いる場合、UIロジックがJavaScriptに依存するため、各コンポーネントで冗長なコードが必要になります。

2. 再レンダリングの負荷
   コンポーネント間でのデータ受け渡しによって、描画や処理のパフォーマンスに影響が出ることがあります。

3. サーバーとクライアントの不整合
   Reactでよく発生するdehydration errorは、サーバー側のレンダリング結果とクライアントの初期描画内容が一致しない場合に発生します。これにより、クライアント側でページ全体を再描画する事態が生じます。このエラーはいざ発生すると解消コストが高く厄介です。

これらの課題を解決する手法として、CSSのみでモバイルデバイス判定を行うアプローチが注目されています。本記事では、その実装方法と利点を詳しく解説します。

実装方法：カスタムプラグインの追加

以下のTailwind CSSのカスタムプラグインを使用すると、モバイルデバイス向けのスタイリングが簡単に行えます。

手順 1: カスタムプラグインを作成する
Tailwind CSSにtouchというカスタムバリアントを追加します。このバリアントは、CSSメディアクエリを利用してモバイルデバイスを判定します。

// tailwind.config.ts
import type { PluginCreator } from "tailwindcss/types/config";

const touchVariantPlugin: PluginCreator = function ({ addVariant }) {
  addVariant("touch", "@media (hover: none) and (pointer: coarse)");
};

module.exports = {
  plugins: [touchVariantPlugin],
};

@media (hover: none) and (pointer: coarse) は、ホバー操作ができず、指のような粗いポインター（タッチデバイスなど）を持つデバイス を対象にしています。

手順 2: Tailwindのスタイルで使用する
これでtouchバリアントを使ってスタイリングが可能になります。

<div class="touch:bg-white">
  // タッチデバイスでは白背景が適用されます
</div>

<div class="hidden touch:block">
  // タッチデバイスでのみ表示されます
</div>

提案のポイント

1. CSSだけで完結
   touchバリアントを使うだけでモバイル向けのスタイリングが可能です。追加のJavaScriptは不要で、Tailwind CSSの基本ルールに沿った記述ができます。モバイル向けのコードもレンダリングされるのでその点はユースケースに見合った判断が必要です。

2. UIと内部処理の分離
   モバイル判定ロジックをCSSに限定することで、UIスタイリングにフォーカスした実装が可能です。一方で、必要に応じて内部ロジックでJavaScriptを利用する余地を残せます。

3. ReactのDehydration Error対策
   このアプローチは、Reactで発生しがちなdehydration errorの抑止に効果的です。このエラーは、サーバー側のレンダリング結果とクライアントの初期描画内容が一致しない場合に発生し、ページ全体の再描画を引き起こします。CSSでモバイル判定を行うことで、サーバーとクライアントの一致性を高め、エラーを回避できます。

4. シンプルで直感的
   Tailwind CSSの既存のクラスと同じように利用できるため、学習コストが低いです。

結論

このアプローチにより、モバイル向けスタイリングをJavaScriptに頼らず実現できます。Tailwind CSSの強力なプラグインシステムを活用することで、CSSのみで簡潔かつ拡張性の高いスタイリングを提供可能です。また、Reactのdehydration error対策としても有効なため、モダンなフロントエンド開発において特に有用です。

ぜひ試してみてください！

---

告知
この記事が少しでも誰かのお役に立てば幸いです。
よかったら、今回の知見を得たきっかけになったサービス、Aroundsに遊びに来てください♪
趣味や愛用品があなたを物語ってくれる、新しいスタイルのLink in bioプラットフォームです。

エンジニアチームのコミュニケーション促進も果たせると思うので
好きな漫画や信仰している技術書、デスク周りのガジェット、思い出の旅行先など集めて教えてください^^

Happy hacking!