CODEWITHSUNDEEP
javascripthtmlreactjstailwind-css
vasilis 123
vasilis 123

Reputation: 665

tailwind css does not apply dark mode on react project

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 .

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');
  }

When I click on a button in a react component the above code is succesfully executed and my <html> element becomes <html class = 'dark'> However the styles are not applied wherever I have set a 'dark:' style on an element ex. <div class = 'bg-blue-600 dark:bg-gray-600'> I am a div </div> does not apply the dark style on the element .

I think there is a problem with my tailwind.config.js file but this is my first time using tailwind and I need your help :

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

Upvotes: 2

Views: 3365

Answers (1)

timbersaw
timbersaw

Reputation: 660

As in docs it's darkMode not just dark

  darkMode: 'class',

Upvotes: 2

Related Questions