title: tailwind css does not apply dark mode on react project
body: <p>This is my first time using tailwind and I have  a react project where I use react hooks to toggle between light and dark mode .</p>
  <pre><code>const [darkMode,setDarkMode] = useState(false);
  const toggleTheme = ()=&gt;{
      setDarkMode(!darkMode);
      const root = window.document.documentElement; //add 'dark class to html root element'
      root.classList.toggle('dark');
    }
  </code></pre>
  <p>When I click on a button in a react component the above code is succesfully executed and my <code>&lt;html&gt;</code> element becomes <code>&lt;html class = 'dark'&gt;</code> However the styles are not applied wherever I have set a <code>'dark:'</code> style on an element
  ex. <code>&lt;div class = 'bg-blue-600 dark:bg-gray-600'&gt; I am a div &lt;/div&gt;</code> does not apply the dark style on the element .</p>
  <p>I think there is a problem with my <code>tailwind.config.js</code> file but this is my first time using tailwind and I need your help :</p>
  <pre><code>module.exports = {
    future: {
      removeDeprecatedGapUtilities: true,
      purgeLayersByDefault: true,
      defaultLineHeights: true,
      standardFontWeights: true,
    },
    experimental: {
      darkModeVariant: true,
    },
    dark: 'class',
    purge: {
      content: ['./src/**/*.{js,ts,jsx,tsx}'],
    },
    theme: {
      extend: {
        colors: {
          violet: '#5964E0',
          'light-violet': '#939BF4',
          'very-dark-blue': '#19202D',
          midnight: '#121721',
          'light-grey': '#F4F6F8',
          grey: '#9DAEC2',
          'dark-grey': '#6E8098',
          'normal-grey': '#f2f2f2',
          'checkbox-dark': 'rgba(255, 255, 255, 0.1)',
          logo: {
            1: '#DF6DAE',
            2: '#3DB3D1',
            3: '#3D3B94',
            4: '#F0B62A',
            5: '#E66D39',
            6: '#FB7E66',
            7: '#007CFF',
            8: '#492A29',
            9: '#60DCAD',
            10: '#FF585F',
          },
        },
        opacity: {
          10: '0.1',
          20: '0.2',
          35: '0.35',
        },
        minHeight: {
          card: '14.25rem',
          52: '13rem',
          35: '8.75rem',
        },
        maxWidth: {
          76: '19rem',
          183: '45.75rem',
        },
        spacing: {
          '1px': '0.0625rem',
          3.5: '0.875rem',
          10.5: '2.625rem',
          14.5: '3.625rem',
          30: '7.5rem',
          34: '8.5rem',
          35: '8.75rem',
          76: '19rem',
        },
        borderRadius: {
          button: '0.3125rem',
        },
        lineHeight: {
          button: '1.18rem',
        },
        flex: {
          4: '4 4 0%',
        },
      },
    },
    variants: {
      backgroundOpacity: ['responsive', 'hover', 'focus', 'dark'],
    },
    
  }
  </code></pre>