This PR enables the usage of deeply nested color objects, by making the flattenColorPalette function recursive.

Currently, the flattenColorPalette function can flatten a palette with a total of one nested object. Which means that if we want the following output:

.text-success { color: #285B45 }
.text-button-primary { color: #FFFFFF }
.text-button-primary-hover { color: #FFFFFF }
.text-button-primary-press { color: #FFFFFF }
.text-button-primary-muted { color: #FFFFFF }

We need to use the following color object:

{
  success: '#285B45',
  'button-primary': {
    DEFAULT: '#FFFFFF',
    hover: '#FFFFFF',
    press: '#FFFFFF',
    muted: '#FFFFFF',
  },
}

Instead of the more intuitive and practical following one:

{
  success: '#285B45',
  button: {
    primary: {
      DEFAULT: '#FFFFFF',
      hover: '#FFFFFF',
      press: '#FFFFFF',
      muted: '#FFFFFF',
    },
  },
}

Currently, that last color object would generate the following invalid CSS:

.text-success {
  color: #285B45
}

.text-button-primary color {
  DEFAULT: #FFFFFF;
  hover: #FFFFFF;
  press: #FFFFFF;
  muted: #FFFFFF
}

With this pull request, it would generate the expected CSS.

Note: this is actually out of scope, but this is the second time I try to contribute to Tailwind and I'm on a Windows machine. On Windows, line endings are a mess, so I added the endOfLine: auto rule to eslint, and I also created a .prettierrc file with the same rules (that would override any default IDE configuration).

Normally, that wouldn't change anything for you. If you don't actually want that, I can remove them from the PR, or create a separated one.