0

Using tailwind and react, I am using a config file as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  darkMode: "class",
  important: "#app",
  theme: {
    colors: {
      ...
    },
    fontFamily: {
      ...
    },
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

and setting the class as follows

darkMode
      ? document.documentElement.classList.add("dark")
      : document.documentElement.classList.remove("dark");

Inspecting the top element, it is indeed adding and removing a class="dark" to the top element. However, two elements like

text-grey-300 dark:text-grey-700

aren't changing when the class changes, at all. When the darkMode: Class is removed, it accurately follows OS preference however. Whats going on?

I have tried changing the class selector manually, tried placing the dark on other elements, moving the declaration around in my config file, none of it seems to help.

rn-3841603
  • 3
  • 1
  • Update: It appears to work if the "dark" class is added to its direct parent, but doesn't "see" dark on anything higher then that. How can I make it see the dark class higher up? – rn-3841603 Dec 14 '22 at 19:27
  • Update 2: Adding a div wrapper to the react router and applying it to that seems to work for now, though is a somewhat poor permanent solution. – rn-3841603 Dec 14 '22 at 21:25
  • See this [answer](https://stackoverflow.com/questions/74493982/tailwindcss-nesting-not-working-with-postcss-config/74501200#74501200) - the question itself is not about your case but the second part (about using darkmode and important together) does. Check your CSS output for any dark class utility – Ihar Aliakseyenka Dec 15 '22 at 15:55

0 Answers0