make sure you added main.css file to nfig. The dark mode is a feature that allows you to switch the color theme of an app or a whole OS to black or something on the brink of it. would normally get with a classic CSS framework like Bootstrap or Bulma. check content property (read more here) on the utility-first Tailwind CSS framework featuring dark mode support. I copied your codes and tested them I think your main mistake is that you define darkMode property in the wrong place: Now about your main.css file you didn't add tailwind directives( but this is not necessary) : base bg-lightPrimary dark:bg-darkPrimary įinally, your should be this: // Second, your darkMode shouldn't be the property of theme you should define it in the root main.css What is content: The content section of your file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names. Chakra UI: All components are light and dark mode compatible. Warn - The content option in your Tailwind CSS configuration is missing or empty. Tailwind CSS: If you come from a bootstrap or bulma CSS background, you might find it easy. There are mistakes in your file: /** */Ĭontent:, // you forget contentĭarkMode: 'class', //you should define darkMode hereįirst, you forget the content property you should get this warn: I think your tailwind version is 3.1.6 "devDependencies": "^3.2.0", Ok, there are several mistakes: package.json Looking at the docs and tutorials I found elsewhere it should just work like that.ĭo I need to set the mode as a global state inside the store? Should I call the hook in a root-level component? The mode seems to be switching since the icon does change accordingly. The classes are actually toggling when I manually change the color mode from my os (win11) settings, but clicking the button won't replicate the same behavior. Since I wanted to place the switch in the header here's what I did in the component: assets/css/main.css I have no meaningful config about dark mode, just some classes I defined globally html transition-colors ease-in bg-gradient-to-b bg-no-repeat w-screen dark:from-dark/95 dark:via-dark/95 dark:to-dark dark:text-white from-white via-light/50 to-light I installed in devDeps the module in version 3.2.0, which should be compatible with Nuxt 3, according to the docs "^3.2.0"Īnd applied the proper configuration in modules: , 
Testing tailwind's dark: classes went fine and worked as expected, however I can't make a button switcher work to set the color mode programmatically.
I wanted to implement dark mode on my Nuxt app using tailwind and the recommended module.
0 kommentar(er)
