matchUtilities can't handle nested values

[mattiaz9]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 13.4.19

What version of Node.js are you using?

v20.2.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/mattiaz9/bug-tailwind

Describe your issue

Using matchUtilities with colors, for instance, can't handle the nested values of a color. For instance if a want to pick slate-500 as a color, it autocomplete as slate (using the VSCODE extension) and it puts the values inside the CSS in a weird way.

Example:

matchUtilities(
  {
    "test-color": value => ({
      color: value,
    }),
  },
  {
    type: "color",
    values: theme("colors"),
  }
)

code:

export function Test() {
  return <div className="test-color-slate">Hello world</div>
}

the css preview:

.test-color-slate color {
  50: #f8fafc;
  100: #f1f5f9;
  200: #e2e8f0;
  300: #cbd5e1;
  400: #94a3b8;
  500: #64748b;
  600: #475569;
  700: #334155;
  800: #1e293b;
  900: #0f172a;
  950: #020617;
}

[adamwathan]

Hey! I want to improve the ergonomics around this at some point but currently there's no magic in Tailwind to automatically handle nested data structures like that, you need to always pass a flattened object to the values key.

We have a little helper we use internally for doing that with colors that you can import and use in your plugins if you want:

https://play.tailwindcss.com/QxVQQMNiUJ?file=config

[mattiaz9]

Thank you, that's good enough to me 👍

Maybe you guys should add more examples about plugins in the documentation, right now is difficult to gather information about it.