Svelte's conditional class syntax is not picked up correctly

[zsparal]

First of all, thank you for the great work on Tailwind and JIT in particular, I'm really enjoying the new DX.

I tried to put together a new side project using Svelte + Vite + Tailwind and I couldn't get the JIT to recognize Svelte's conditional class syntax:

<h1 class:text-blue-500={shouldBeBlue}>Hello, World</h1>

Here's a fairly minimal repro: https://github.com/Gustorn/tailwind-svelte-repro

[TeHMoroS]

I have this problem as well. A Svelte + Tailwind project - after switching to JIT it seems that the syntax stops being recognized.

From what I noticed (in my case at least), it might be related to the defaultExtractor parameter. The styles mentioned with Svelte's class: syntax get dropped and this behavior happens when:

• you use the default Tailwind extractor, without including the pattern for class: expressions (drops as a non-valid expression)
• you add the pattern for class: expressions but use the JIT compiler (drops because... well, that's the bug).

Both cases produce the same result: class: syntax styles get dropped. This does not happen when using Tailwind without JIT. I'll try poking around a bit the issue. The speed increase from using JIT is awesome. 🥰

EDIT: I went as far as setupContext.js and found that this:

      candidateFiles: Array.isArray(tailwindConfig.purge)
        ? tailwindConfig.purge
        : tailwindConfig.purge.content,

is basically the only reference made to the purge option (aside from the tests). It would seem that custom extractor configurations are being ignored (actually everything but the glob array is). Maybe they are included when passing tailwindConfig further, but then the problem would be that they don't get passed at all.

[CaptainCodeman]

You can change the class extractor in tailwind to make it aware of the svelte-specific conditional classes. This is working for me:

// tailwind.config.cjs
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");

module.exports = {
  purge: {
    content: [
      'src/app.html',
      'src/**/*.svelte',
    ],
    options: {
      defaultExtractor: (content) => [
        ...tailwindExtractor(content),
        // Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
        ...[
          ...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)
        ].map(([_match, group, ..._rest]) => group),
      ],
      keyframes: true,
    },

Narrator: it wasn't working for him, ignore the crazy fool and keep reading ...

[adamwathan]

Thanks for reporting, we'll get this sorted out soon! Unfortunately customizing the extractor won't work with the JIT library as that option currently is ignored, but someone in the community has opened a PR to support it that I hope to review soon 👍

[TeHMoroS]

@CaptainCodeman That's the point: defaultExtractor is ignored in JIT, so adding a custom extractor like this doesn't work.

@adamwathan Thanks for the info. 👍

For the sake of reference, the PR in question is #125

[CaptainCodeman]

Ah, apologies and thanks for the clarification.

I guess I may have just happened to use classes that were already included as regular class="" props elsewhere, so it gave the appearance that it was working.

[captain-refactor]

I currently use this temporal workaround.

<button class:active={condition}>Button</button>

<style>
  .active {
    @apply bg-indigo-500;
  }
</style>

[www-chique]

I currently use this temporal workaround.

<button class:active={condition}>Button</button>

<style>
  .active {
    @apply bg-indigo-500;
  }
</style>

Can you please try using @apply **hover:**bg-indigo-500 and let me know if it works?
For me it's not working because of the ":" symbol.

[TeHMoroS]

@www-chique: For me it does when building, but the editor (VS Code) shows an error for Svelte and ESLint plugins.

@adamwathan Thanks. Will check it out once again. 👍