Allow for deeply nested color objects

[innocenzi]

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.

[adamwathan]

Hey, think I'm good to merge this but don't really want to maintain two copies of our Prettier rules. Can we remove all that stuff from this PR and resolve any conflicts? Thanks!

[innocenzi]

It's done, @adamwathan. 👍