【解決】html2canvasで「Attempting to parse an unsupported color function "oklch"」エラーが出る原因と対策（Tailwind v4）

Last updated at 2026-04-04Posted at 2026-04-04

1. はじめに（遭遇したエラー）

開発中のWebアプリで「画面の特定のDOMを画像化して保存・シェアする」機能を実装しようと、定番ライブラリである html2canvas を導入しました。

しかし、いざ実行した瞬間に以下のエラーを吐いて、正常に実行されませんでした。

Failed to generate preview image: Error: Attempting to parse an unsupported color function "oklch"

結論、このエラーはコードの書き間違いではありません。「Tailwind CSS v4（または最新のDaisyUI）」と「旧html2canvas」の致命的な相性問題です。

2. なぜエラーが起きるのか？（原因）

Tailwind v4 の仕様変更

Tailwind CSS v4 から、標準のカラーパレット（bg-gray-900 や text-blue-500 など）の裏側の定義が、デフォルトでモダンなCSSカラー関数である oklch で行われるようになりました。
（参考: Tailwind CSS v4.0 リリースノート）

html2canvas の限界

一方で、DOMをCanvasに描画する html2canvas は、2026年時点で数年間アップデートが止まっています。内蔵されているCSSパーサーがこの新しい oklch を理解できず、パースしようとした瞬間にエラーを吐いて止まってしまうのです。

つまり、対象のDOMのインラインスタイルなどで oklch を直接書いていなくても、Tailwindの標準クラスを使っているだけでクラッシュするという厄介な状態に陥ります。

3. 失敗したアプローチ（Vite環境の罠）

最初は「画像化の瞬間（html2canvas の onclone オプション）だけ、スタイルから oklch を強引に除去するか、別の色指定に置換すればいいのでは？」と考えて実装してみました。

しかし、Viteなどのモダンなビルド環境ではこの作戦は失敗します。
なぜなら、本番ビルドではCSSが外部ファイル（<link rel="stylesheet">）に綺麗に切り出されており、html2canvas は描画のためにその外部CSSを丸ごとパースしようとするためです。クローンしたDOMの属性をいくらいじっても、根本的なCSSパーサーのクラッシュは回避不可能でした。

4. 解決策: html2canvas-pro への移行

この問題を根本から解決する最もスマートな方法は、有志によってモダンCSS対応が施された上位互換のフォークライブラリ html2canvas-pro を使うことです。

移行手順は非常にシンプルです。

① 旧パッケージの削除と新パッケージのインストール

npm uninstall html2canvas
npm install html2canvas-pro

② インポート文の差し替え
APIは完全互換に作られているため、Drop-in（そのまま置き換え）で動きます。

// 変更前
import html2canvas from 'html2canvas';

// 変更後
import html2canvas from 'html2canvas-pro';

これだけで、oklch はもちろん display: contents などのモダンCSSも完璧に解釈し、クラッシュせずに綺麗に画像化してくれるようになります。強引なCSSハックや、わざわざエラーを回避するために16進数で色をベタ書き（ハードコード）するような不毛なコードも全て削除できました。

5. おわりに

フロントエンドのエコシステムは進化が早く、定番だと思っていたライブラリが最新のCSS仕様に追いつけず突然死することがあります。

Tailwind v4 や最新の UI フレームワークに移行して html2canvas が動かなくなった方は、泥臭いワークアラウンドに時間を溶かす前に、迷わず -pro に載せ替えましょう。同じエラーでハマった方の参考になれば幸いです。