tailwindcss not applied when using {@html myObject.html}

[ITwrx]

i'm inserting html from my database via {@html}, but it doesn't apply the tailwind css classes referenced in the html to the stylesheet using postcss or however all that works. Tailwindcss works fine in the rest of my app. Currently seeing this behavior in sveltekit 258, as 260 (or me) broke my form error handling and i haven't read up on all of that yet.

Is this a bug, missing feature, or intended behavior?

I would need the css to work for this {@html} tag to be useful for my current and assumed future use case: my apps' Back Offices/CMSes.

thanks

[jonolo6]

If I understand your explanation correctly you have Tailwind classes included in the html that is returned from the DB and expect that to be styled correctly. If so then probably what is happening is that those utility classes are purged out during build. The purge process for Tailwind is there to ensure the bundled css is kept as small as possible and works by simply scanning through the source code to find the utility class names to bundle. If not found - they are purged/removed from the bundled css. I don't think you should use tailwind classes in HTML outside of the source code (say in a DB). It is probably best to use pure css in those situations.

[ITwrx]

thanks. i didn't think of it being removed by tailwind's purge process. I will try custom classes and report back/mark as answer.

[radosdaniel]

I found a hacky solution to solve this issue if you know what classes the html is using:
I've added an empty div with all the classes I use in the html which I get from the db, and commented this item.

For example:
<!--<div class="inline-block w-5 h-5 text-center align-middle bg-neutral-200 rounded-full rounded-md border p-1"></div>-->

Now all the classes are applied correctly!

[aloker]

I suppose the "proper" way is to use Tailwind's safelist setting: https://tailwindcss.com/docs/content-configuration#safelisting-classes