こんにちは！tailwindから離れられないMizutani(@sirycity)です。だって便利すぎるもん...他のCSS使えない｡

今日はそんなtailwind系列のコンポーネントライブラリのdaisyUIを､本来対応してないIEに対応させる方法です｡Next.jsを例に説明しますがどんな環境でもいける｡はず｡

はじめに

• tailwindはCSSのフレームワークです｡daisyUIはその拡張版みたいなやつです｡
• というか､tailwindもPostCSSの拡張版みたいなもんです｡
• tailwindは最新版がv3なんですが､IEに対応してるのはv1までです｡
• daisyUIはtailwindがv1だと使えません｡
• つまりdaisyUIはIEに対応してません｡
• んで､そこをなんとかするのがこの記事です｡

そもそもなぜIE非対応なのか

tailwindはv3だとIEに非対応です｡正確にはv2から非対応です｡でもなんででしょう？

非対応ってことは､言い方を変えると tailwindはIEが非対応の機能を容赦なく使っているということです｡実際その通りで､tailwindがv2からがっつり使っているCSS変数がIE非対応の機能です｡

ってことは逆に言えばCSS変数を使ってなければIEでも使えるってことです｡

PostCSSでCSS変数を解除しよう

CSS変数なんですが､別にめっちゃくちゃ重要な機能というわけではないです｡その気になれば使わなくても大丈夫です｡

世の中には便利なもので､CSS変数を解除できるPostCSSのプラグインがあるんです(解除って言い方おかしい？)それがこちら

postcss-css-variables

こいつをインストールしてpostcssに設定してやりましょう｡

tailwindはプラグイン？

余談ですが､postcss視点から見たらこのpostcss-css-variablesとtailwindはどちらもプラグインです｡並列です｡tailwindはCSSフレームワークなんですが PostCSSに依存しているため､postcssのプラグインという見方もできます｡というかそのように考えた方が設定しやすいです｡

感覚としてpostcssを使ってtailwindからCSS変数を抜き取るのではなく､元々あるCSSのコードにフィルター1(tailwind)を適用した後フィルター2(CSS変数解除)を適用すると考えた方が理解が進むかと思います｡

postcssの設定ファイルに定義

それでは実際にPostCSSの設定ファイルに書いていきましょう｡こんなかんじ｡

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-css-variables')({
      preserve: true,
    }),
  ],
}

ポイントはpreserve: trueを付けることです｡これはCSS変数を解除するけど一応解除前のやつも残しておくぜって設定です｡そもそもIE以外はCSS変数を問題なく読み込めるので､このような設定にしています｡ここだけの話postcss-css-variablesのCSS変数解除は完璧ではなく､適用する際に元のCSS変数を使ったコードを完全に消してしまうとdaisyUIの表示が一部崩れてしまったりします｡分かりやすい所だとBreadcrumbsとか｡なので元のコードも残しときます｡

さいごに

daisyUIは基本的にモダンフロントエンドの環境を前提としているため､IEみたいな古の環境が非対応となるのは分かります｡ってかそれが正しいと思います｡でも大人の事情でIEに対応させる必要もあると思います｡そんな時に参考にしてくれると嬉しいです｡以上｡