utilities type for addUtilities() plugin should accept string[] values but does not

[MichaelAllenWarner]

What version of Tailwind CSS are you using?

v3.1.4

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

N/A

What version of Node.js are you using?

v18.4.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

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

Describe your issue

As demonstrated here, the postcss-js library that Tailwind uses for parsing CSS-in-JS objects supports string-array values. This is useful for creating fallback rules. For example, I like to do this sort of thing in my Tailwind config:

addUtilities({
  '.content-dot': { content: ['"•"', '"•" / ""'] },
  // ...
});

With this, browsers that support the alt-text syntax for the content property will use content: "•" / "" (so that screen-readers don't announce "bullet" or whatever), while browsers that don't will use the content: "•" fallback.

Currently, however, if I use // @ts-check at the top of my Tailwind config and do /** @type {import('tailwindcss').Config} */ for my module.exports, then the above example will result in a red underline on content, and the error reads:

(property) content: string[]
Type 'string[]' is not assignable to type 'string | RecursiveKeyValuePair<string, string>'.
  Type 'string[]' is not assignable to type 'RecursiveKeyValuePair<string, string>'.
    Index signature for type 'string' is missing in type 'string[]'.ts(2322)

The type for addUtilities() should probably be modified to accommodate string-array values. I imagine that the problem is more general and should likewise be remedied wherever else it appears.

[thecrypticace]

Hey, thanks for reporting this! Good catch. I've merged in a fix that will go out in our next release. If you want to check it out before it's released you can install our insiders build (npm install tailwindcss@insiders) which should be out in a few minutes.