【TailwindCSS】lg:などのモディファイアとともに動的な任意の値を利用する方法

📌 はじめに

こんにちは！@Ryo54388667です!☺️

普段は都内でフロントエンドエンジニアとして業務をしてます！
主にTypeScriptやNext.jsといった技術を触っています。

今回はTailwindCSSで任意の値を利用するについて紹介したいと思います。
本記事は、こちらの書籍からの引用に追記したものです。大感謝です！🙏
https://www.amazon.co.jp/gp/product/B0CQWSQZHG/ref=ppx_yo_dt_b_d_asin_title_351_o00?ie=UTF8&psc=1

📌 課題

まず、解決したい課題を確認します。

引用元

これは、TailwindCSSがビルド時にCSSファイルを生成する特性上、クライアントで実行されるようなランタイムの実行結果をクラス名に含むことができません。例にあるように、22pxや17pxのように開発時点から決め打ちでハードコーディングできるものなら書き換え可能です。

しかし、下記のように要素の高さを計算して設定するようなものはどうでしょうか？

<div className={ size === 'lg' ? ‘h-[22px]' : `mt-[${htmlElement.scrollHeight}px]` }></div>

この方法は機能しません。(このケースだとh-autoくらいで許容できそうですが。。😅)

このような任意の値を利用する際は、style属性を利用することになると思います。

style={{ "height": size === 'lg' ? “22px” : `${htmlElement.scrollHeight}px` }}

こちらを利用すると任意の値を利用できます。

解決できる場合はこれで問題なさそうです。
さらに一歩進んで、TailwindCSSのlg:, md:, などのモディファイアとともに、任意の値を利用したいケースもあるでしょう。先ほどの方法は、TailwindCSSの機能を直接利用しているわけではありません。

この課題の解決方法を紹介していきます！

📌 lg:などのモディファイアとともに任意の値を利用する

結論、CSSのカスタムクラス(CSS変数)を利用することです！👏
書籍から引用すると、下記のようなコードです。

<div className="h-[200px] lg:h-[var(--parent-height)]" style={{ "--parent-height": el.innerHeight }}>
良い感じに伸びる
</div>

※緑の背景の箇所。動画ではわかりやすいように極端にheight(ex. 要素の高さ + 1000)をとっています。

lg:h-[var(--parent-height)]の箇所はlg:h-[--parent-height]というふうにショートハンドで書くこともできます！この方法だと、style属性でクライアントの任意の値を利用しつつ、TailwindCSSのlgモディファイアも反映されます。良いですね👍

ただ、留意点としてReactのstyle属性の型にカスタムプロパティが存在しないので、そのまま用いると下記のようにlinterに叱られます。

オブジェクト リテラルは既知のプロパティのみ指定できます。'"--parent-height"' は型 'Properties<string | number, string & {}>' に存在しません。

最もお手軽な解決方法は型アサーション(as)を利用する方法です。

style={{ ["--parent-height" as string]: el.innerHeight  }}

とりあえず型エラーは解決できますが、タイポを見過ごすことになりかねない方法です😇
いろいろ解決方法はあるかと思いますが、プロジェクトのルートにglobals.d.tsファイルを作成して追加するようにしました。

// globals.d.ts
import 'react';

declare module 'react' {
  interface CSSProperties {
    '--parent-height'?: string; // カスタムCSS変数を追加
    // 他のカスタムCSS変数が必要な場合は、ここに追加します
  }
}

安直にglobalに宣言していますが、下記のような懸念点もあるので、検討が必要かもしれません。

This pattern is somewhat dangerous due to the possibility of runtime conflicts, but we can still write a declaration file for it.

参考

CSS変数の型追加に関して、何か良い方法があれば教えてください🙏
少し横道に外れてしまいましたが、lg:などのモディファイアとともに動的な任意の値を利用する方法を紹介しました。

📌 まとめ

CSS変数とstyle属性を組み合わせることで、lg:などのモディファイアとともに動的な任意の値を利用することができます💪TailwindCSSを利用していて、このケースに当たるのは稀ですが、半年に一度くらいで役に立ちそうです！

最後まで読んでいただきありがとうございます！
気ままにつぶやいているので、気軽にフォローをお願いします！🥺
https://twitter.com/Ryo54388667/status/1733434994016862256