loading...

Discussion on: Using TailwindCSS with SvelteJS

Collapse
tompretty profile image
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 :(

Collapse
muhajirdev profile image
Muhammad Muhajir Author

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...

Collapse
tompretty profile image
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!

Collapse
collardeau profile image
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;
}