JIT ignores Svelte class:directives

[kkarpeev]

What version of @tailwindcss/jit are you using?

0.1.18

What version of Node.js are you using?

12.18.1

What build tool (or framework if it abstracts the build tool) are you using?

webpack 5, postcss 8, tailwindcss 2.0.4

What browser are you using?

all of them, doesn't matter

What operating system are you using?

doesn't matter (windows, wsl, linux)

Reproduction repository

https://github.com/kkarpeev/svelte-tailwind-template

Hello. JIT skips classes specified in a class: directives in .svelte or html files. Svelte is a top-6 js framework in 2020 (according to some TOPs).
Please, add support for this directive asap.

See this small description (and that's all):

If you try the repo (thanks to @non25) you'll see that jit ignores class:w-4={!active}. This class appears on <button... element in this example.
There are two variants for using this directive:

1. class:whatever-class-name123_
2. class:whatever-class-name123_={some_boolean_expression}

Thank you in advance!

[Adamatt]

Try to update your Tailwindcss package to the latest version. This issue was already fixed by this PR #tailwindlabs/tailwindcss-jit#183 and tailwindcss-jit has been merged with the core package

Otherwise, you have to change the default extractor as described here #tailwindlabs/tailwindcss-jit#71 (comment)

[bradlc]

Should work fine now without a custom extractor 👍

[bcharbonnier]

@bradlc Sorry to comment on closed issue, but is there something special to do to have it working ?

I am using latest version v2.1.2 using default configuration, with just mode: 'jit' and it is still not recognizing the svelte class:directive pattern.
I still have to use the above trick from tailwindlabs/tailwindcss-jit#71 (comment)

[denovodavid]

@bcharbonnier There is an additional fix from #4187 that hasn't been released yet. I'm still using a custom default extractor for it to work.