Description
What version of Tailwind CSS are you using?
v3.3.5
What build tool (or framework if it abstracts the build tool) are you using?
vite v4.5.0, postcss v8.4.31
What version of Node.js are you using?
v18.18.0
What browser are you using?
Chrome, Firefox, Safari
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/qrYKzCyyms
Describe your issue
After bravely upgrading to the latest and supposedly greatest version of TailwindCSS (leaping from v3.3.3 to v3.3.5), our project decided to throw a dramatic tantrum and completely collapsed, prompting a less-than-glamorous retreat back to the older version. The root of our comedy of errors? Our custom responsive utility classes, which apparently have a sense of humor too, especially the negative ones. Several coffee cups and a few hours of head-scratching later, I stumbled upon the culprit.
It appears that TailwindCSS struggles with utility classes that begin with a "-" (minus sign) when combined with pseudo-class modifiers. While I understand that our use of responsive utilities may not align perfectly with TailwindCSS's intended use, this issue seems to be more broadly related to any custom utility class starting with a "-" throwing the error: "Cannot read properties of undefined (reading 'raws')".
Whilst digging around in the source code I managed to create a quick fix. It seems that the variants / screenNodes extracted from the context.stylesheetCache generate an undefined PostCSS Node. (I really tried to understand all of this and how it comes to be - but it just got too complicated at this point to debug it ^^ - hope it helps tho)
// lib/expandTailwindAtRules.js
...
// We do post-filtering to not alter the emitted order of the variants
const variantNodes = Array.from(screenNodes).filter((node) => {
if (typeof node === 'undefined') return false // <- this line "fixes" it
const parentLayer = node.raws.tailwind?.parentLayer
if (parentLayer === 'components') {
return layerNodes.components !== null
}
if (parentLayer === 'utilities') {
return layerNodes.utilities !== null
}
return true
})
...