Classes such as p-1.5 and p-2.5 are not detected and purged in minified javascript during build

[joshua-jordan]

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

[kazutokidigaya]

hey there few things Tailwind CSS generates classes based on predefined values and it does not include decimal values for padding and margin or other to use those decimal values you can go to your Tailwind config file and set the padding which is inside extend which is inside the theme to your given values
theme: {
extend: {
padding: {
'1.5': '0.375rem',
'2.5': '0.625rem',
},
},
}, it would work for both the cases for "p-2.5" and for "!p-2.5"

[RobinMalfait]

Hey!

This should be fixed by #12121, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.