divide-y-0/divide-x-0 classes output faulty values

[f-elix]

What version of @tailwindcss/jit are you using?

0.1.7

What version of Node.js are you using?

14.15.5 (LTS)

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction repository

Unfortunately this is a private repo that I can't share, but it should be fairly easy to reproduce anywhere.

The divide-y-0 and divide-x-0 classes generate faulty values that have weird side effects when using @tailwind/jit.

With the regular Tailwindcss processor:

.xs\:divide-y-0>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px*calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px*var(--tw-divide-y-reverse));
}

With @tailwind/jit:

.xs\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0 * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0 * var(--tw-divide-y-reverse));
}

The difference is the missing "px" in the @tailwind/jit version, which causes the value to be invalid.

In some cases, these faulty values were causing the element to have 3px borders (top and bottom with the divide-y-0 class).

[adamwathan]

Fixed in v0.1.10, thanks!

[f-elix]

That was almost as fast as your jit compiler. Well done!