2022-01-16

[TailwindCSS]v2からv3にアップデートした際に出るwarnの解消

#開発
#TailwindCSS
blogimg

題名の通りです。

ビルド時にwarnが出て気になったので調べてみたログをメモとして残しておきたいと思います。

TailwindCSSをv2からv3にアップデートすると以下のようなwarnが出てくるようになります。

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.

warn - The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.
warn - Change `darkMode` to `media` or remove it entirely.

自分はTailwindCSSのバージョンが2系の時に

$ npx tailwindcss init

で設定ファイルを作成し導入していたのでv3にあげた際に上記のwarnが出るようになってしまいました。

v2時のtailwind.config.jsファイル

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'pc-bg-img': "url('/pc-bg.jpg')",
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

これのpurgeに関する部分とdarkModeに関する部分についてwarnが出ているので解消します。

結論、以下のようにするとwarnが解消されました。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "media"
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        "pc-bg-img": "url('/pc-bg.jpg')",
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

そして、なんならdarkMode設定しない場合は項目ごと無くしてしまっても良いみたいです。

補足 TailwindCSSにおけるダークモード

TailwindCSSではダークモードを簡単に有効化することができます。

やり方は簡単で、

tailwind.config.jsファイルにて、

module.exports = {
  purge: ['./public/**/*.html'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
  darkMode: // 'media' or 'class'
}

darkModeのプロパティの値をmediaかclassに設定するだけです。

mediaに設定するとOSのダークモードの設定値によってダークモードにするかしないかを決定します。

classに設定すると手動で切り替えられます。

詳細は以下の記事を参照ください。

Tailwind CSSでダークモード