Nested custom colors not automatically switching to dark mode

[epleaner]

Expected

Using these custom colors:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#caf0f8", 
          300: "#90e0ef", 
          600: "#0077b6", 
          900: "#03045e",
        },
        nested: {
          primary: {
          50: "#caf0f8", 
          300: "#90e0ef", 
          600: "#0077b6", 
          900: "#03045e",
        },
        },
      },
  },
}

When something like this is rendered in dark mode:

<div className="w-64 h-64 bg-nested-primary-50" />

It renders with bg-nested-primary-900, as it would if it were:

<div className="w-64 h-64 bg-primary-50" />

Actual

In dark more,

<div className="w-64 h-64 bg-nested-primary-50" />

does not change colors to its dark variant.

Current workaround:

Key nested colors as hyphenated keys:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#caf0f8", 
          300: "#90e0ef", 
          600: "#0077b6", 
          900: "#03045e",
        },
        "nested-primary": {
          50: "#caf0f8", 
          300: "#90e0ef", 
          600: "#0077b6", 
          900: "#03045e",
        },
        },
      },
  },
}

[jjranalli]

Thanks for pointing this out and proposing a workaround. Planning to fix this in a future version of the library