You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
The text was updated successfully, but these errors were encountered:
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.
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:With this, browsers that support the alt-text syntax for the
content
property will usecontent: "•" / ""
(so that screen-readers don't announce "bullet" or whatever), while browsers that don't will use thecontent: "•"
fallback.Currently, however, if I use
// @ts-check
at the top of my Tailwind config and do/** @type {import('tailwindcss').Config} */
for mymodule.exports
, then the above example will result in a red underline oncontent
, and the error reads: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.The text was updated successfully, but these errors were encountered: