Discussion on: Using TailwindCSS with SvelteJS

[Tom Pretty]

Hey thanks for this - super helpful! I'm running into an issue though when I use the svelte class shorthand:

class:active="{ current == me }"

Purgecss ins't detected that I'm using the class active :(

[Muhammad Muhajir]

Hey Tom,
I haven't tried it yet. It's probably related to the purgecss regex.

See more here: tailwindcss.com/docs/controlling-f.... When the class name is not found anywhere in the source code. It will try to remove that code. Hence the class active is removed.

You can find the regex implementation in github.com/muhajirdev/svelte-tailw... . in defaultExtractor part.

A quick solution for this it to put class "active" into whitelist.

Here's an example I whitelist "html", and "body" in nextjs-tailwind template github.com/muhajirdev/nextjs-tailw...

[Tom Pretty]

Hey,

Yeah you're right it's an issue with the regex. It matches the whole string class:active. I tried to come up with a regex that could handle that but failed miserably! My current solution was to drop that svelte feature and use the classnames package to simplify optional classes.

I think whitelisting would work too, but I'm using tailwindcss so I was adding lots of classes like that. I didn't want have to keep addind lots of little utility classes to a whitelist.

Cheers!

[Thomas Collardeau]

This extractor is working for me, but I've not tested it thoroughly:

function extractor(content) {
  const matches = content.match(/[A-Za-z0-9-_:/]+/g) || [];
  const res = matches.map(match => {
    if (match.startsWith("class:")) {
      return match.split(":")[1];
    }
    return match;
  });
  return res;
}