tailwind-css - Tailwind CSS ダークモードが有効にならない

Question

システムのデフォルトに基づいて、tailwind を使用してダーク モードを有効にしようとしています。

これを達成するために、プラグインを使用しています: Tailwind dark mode。

Tailwind の構成失敗は次のとおりです。

defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
    experimental: {
        darkModeVariant: true
    },
    purge: [],
  theme: {
      extend: {
          fontFamily: {
              sans: ['Nunito', ...defaultTheme.fontFamily.sans],
          },
          screens: {
              'dark': {'raw': '(prefers-color-scheme: dark)'},
              // => @media (prefers-color-scheme: dark) { ... }
          },
      },
  },
  variants: {
      backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
      borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
      textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
      opacity: ['responsive', 'hover', 'focus', 'disabled']
  },
  plugins: [require('tailwindcss-dark-mode')()],
}


defaultTheme = require('tailwindcss/defaultTheme');

そして、私のhtmlファイルに次を追加しています：

<span class="dark:text-yellow-400">
    1
</span>

プラグインはダーク モードをチェックしますが、テキストが黄色にならず、黒のままです。

なぜそれが機能しないのか誰かが知っていますか？