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...
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.