なつねこメモ

2021/05/07

NightwindCSS で TailwindCSS のダークモード対応を楽にしたい

考えることを極力減らしたい、そんな私ですが、ダークモード対応も面倒ですよね。
そんなときに使えるのが NightwindCSS という TailwindCSS のプラグインがあります。
それを使ったダークモード対応のお話。

といっても導入方法は簡単で、以下のようにしてあげれば終わります。
まずはいつも通り依存に追加してあげて、

$ yarn add nightwind

TailwindCSS の設定のプラグイン部分に追加してあげる。

module.exports = {
  // 略
  plugins: [
    require("nightwind")
  ],
}

最後に、何かしらの方法で script タグを追加してあげる。
今回は、 React.StrictMode を有効にした状態で開発しているので、 react-helmet ではなく react-helmet-async で対応しました。

import React from "react";
import { Helmet, HelmetProvider } from "react-helmet-async";
import nightwind from "nightwind/helper";

const App: React.VFC = () => (
  <HelmetProvider>
    <div>
      <Helmet>
        <script type="text/javascript">{nightwind.init()}</script>
      </Helmet>
    </div>
  </HelmetProvider>
);

export default App;

このとき、 react-helmet 系を使う場合は dangerouslySetInnerHTML 経由で設定すると何も設定されないので、直接子要素に追加してあげる必要があります。
生成されるコード的にも、直接子要素に設定しても出力結果は変わらないので問題ありません。

これだけで、 TailwindCSS でのダークモード対応は終了......！と行きたいところですが、
この状態のままだと、不使用のクラスと認識されてパージされるので、 PurgeCSS の設定も必要になります。
PurgeCSS の設定はめんどうなので下のようにしました。

module.exports = {
  // 略
  purge: {
    content: [
      "./src/**/*.{ts,tsx}",
      "./public/index.html",
    ],
    options: {
      safelist: {
        deep: [/dark/],
      }
    }
  },
}

これで、プロダクションビルドでも無事反映されるようになりました。
ということで、らくらくダークモード対応のお話でした。ではでは～。