[bug] @apply variant classes don't work as expected with @tailwindcss/jit

[jjranalli]

When tailwindcss-jit is enabled, the nightwind-generated classes of @apply variant/screen color classes such as @apply hover:text-blue-600 or @apply sm:text-blue-600 aren't generated correctly.

@apply color classes such as @apply text-blue-600 work as expected.

This seems to be caused by the way jit is generating @apply classes, but I still have to get a better understanding of this aspect. To avoid the issue, refrain to use @apply variant/screen color classes for the moment.

Any feedback is appreciated!

[vesper8]

Yep having the same issue here.. using the new mode: 'jit' I got an error that focus:tw-outline-none is not a real class when used via @apply

And it's having other issues with my tailwind.css file which looks like this:

It's complaining that Cannot read property 'base' of undefined

Was not having any of these issues before enabling this plugin

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-text-base: 255, 255, 255; /* #ffffff */
        --color-text-muted: 199, 210, 254; /* #c7d2fe */
        --color-text-inverted: 79, 70, 229; /* #4f46e5 */
        --color-fill: 67, 56, 202; /* #4338ca */
        --color-button-accent: 255, 255, 255; /* #ffffff */
        --color-button-accent-hover: 238, 242, 255; /* #eef2ff */
        --color-button-muted: 99, 102, 241; /* #6366f1 */
    }
    .theme-swiss {
        --color-text-base: 255, 255, 255; /* #ffffff */
        --color-text-muted: 254, 202, 202; /* #fecaca */
        --color-text-inverted: 220, 38, 38; /* #dc2626 */
        --color-fill: 185, 28, 28; /* #b91c1c */
        --color-button-accent: 255, 255, 255; /* #ffffff */
        --color-button-accent-hover: 254, 242, 242; /* #fef2f2 */
        --color-button-muted: 239, 68, 68; /* #ef4444 */
    }
    .theme-neon {
        --color-text-base: 17, 24, 2; /* #111802 */
        --color-text-muted: 47, 67, 6; /* #2f4306 */
        --color-text-inverted: 235, 250, 204; /* #ebfacc */
        --color-fill: 179, 255, 23; /* #b3ff17 */
        --color-button-accent: 36, 52, 3; /* #243403 */
        --color-button-accent-hover: 55, 79, 5; /* #374f05 */
        --color-button-muted: 212, 255, 122; /* #d4ff7a */
    }
}

[jjranalli]

Unfortunately this may take a while to solve, it's one of the "". There seems to be a range of issues related to how jit is generating classes under the hood. There is also an open issue on tailwindcss repo related to this.

If you're mostly using utility classes in the markup, aren't using variants inside @apply and haven't got a particularly complex configuration, you should be able to enable jit and encounter no issues.

However, if you do rely on any of these and are encountering issues with Nightwind, you should disable jit until this issue is resolved.

[luccasmaso]

Same here