Description
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?
React, but also Tailwind CLI & play.tailwindcss.com
What version of Node.js are you using?
v18.15.0
What browser are you using?
Chrome
What operating system are you using?
Windows
Reproduction URL
https://github.com/joshua-jordan/tailwind-issue-demo
https://play.tailwindcss.com/IJRwsjWoOx
Describe your issue
There are problems with the detection of the used classes. I have observed this case in combination with cva and minified javascript, but it is not a problem of cva.
Some used classes are purged during the build process. According to my observation this concerns e.g. the class p-1.5 or p-2.5. Very specifically it concerns the following line of my demo project:
https://github.com/joshua-jordan/tailwind-issue-demo/blob/main/src/myCVAComponent.js#L6
The used classes are: p-1, p-1.5, p-2, p-2.5
But the generated output is:
.p-1{
padding: 0.25rem
}
.p-2{
padding: 0.5rem
}
p-1.5 and p-2.5 are missing
I have noticed an interesting behaviour when I change the named line. For example, if I insert a space or replace the empty bracket with a string, it works as expected.
Example:
// Not working
const myCVAComponent = cva([],{defaultVariants:{size:"md"},variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});
// Working ↓
const myCVAComponent = cva([],{defaultVariants:{size:"md"}, variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});
// Working ↓
const myCVAComponent = cva("",{defaultVariants:{size:"md"},variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});
https://play.tailwindcss.com/IJRwsjWoOx (not working)
https://play.tailwindcss.com/wRxNehIEec (working)
And another thing, if I add a ! in front of the class p-2.5, the class !p-2 will be generated and not !p2-5 as expected.
https://play.tailwindcss.com/yvhOn4khZP