顺风 css 不在反应项目上应用暗模式

Question

这是我第一次使用tailwind，我有一个反应项目，我使用反应钩子在明暗模式之间切换。

const [darkMode,setDarkMode] = useState(false);
const toggleTheme = ()=>{
    setDarkMode(!darkMode);
    const root = window.document.documentElement; //add 'dark class to html root element'
    root.classList.toggle('dark');
  }

当我单击反应组件中的按钮时，上述代码成功执行并且我的<html>元素变为<html class = 'dark'>但是 styles 不适用于我在元素上设置'dark:'样式的任何地方前任。 <div class = 'bg-blue-600 dark:bg-gray-600'> I am a div </div>不对元素应用深色样式。

我认为我的tailwind.config.js文件有问题，但这是我第一次使用 tailwind，我需要你的帮助：

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'],
  },
  
}

Answer 1

正如在文档中它是darkMode 而不仅仅是dark

  darkMode: 'class',

顺风 css 不在反应项目上应用暗模式

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-06 16:18:03

顺风 css 不在反应项目上应用暗模式

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-06 16:18:03

解决方案1
1 已采纳 2021-03-06 16:18:03