Inlined Tailwind classes not working for components imported from node_modules

[endigo9740]

Here's what I've done so far:

1. Built a SvelteKit component library using the packaging feature
2. Built this component library utilizing Tailwind - for ease of styling, theming, and dark mode
3. Published the component library package to NPM
4. Installed and imported the NPM package in another application - to "consume" the components

So far I've got everything working, with the exception of inlined Tailwind classes applied to the component library's components.

Here's a couple quick example components for reference...

Card component using inlined styles:

<div class="bg-surface-200 p-5 rounded-lg dark:bg-surface-800 {$$props.class}">
    <slot />
</div>

Button component using a <style> block plus @apply:

<button on:click>Foobar</button>
<style lang="postcss">
    button { @apply bg-surface-300 text-surface-900 hover:bg-surface-400; }
</style>

I then package and publish the component library to NPM. Then install the package and import the components for use on my page, which looks like this:

Note that any component that uses the style block + @apply (button/divider) works as expected. But my card component, which uses inline styles, does not have the expected styles applied.

Out of curiosity I created a div using the same classes applied to the card:

<div class="bg-surface-200 p-5 rounded-lg dark:bg-surface-800">Foo</div>

Doing this I see the styles apply not only to this custom div, but also the card component itself. This tells me that the JIT compiler may not be "seeing" the classes embedded within the component itself, since they come from something like: node_modules/@org/packageName/Card/Card.svelte.

I have tried adding the following to my Tailwind config, but unfortunately it did not work:

module.exports = {
    // ...
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/@org/packageName/*.{html,js,svelte,ts}' // <-- added this
	],
    // ...
};

I guess the idea is Tailwind needs to know about these classes that are coming from an external source - from a NPM package in node_modules. is there a recommended way to handle this? Perhaps this is just not possible with inlined classes?

[endigo9740]

A quick follow up - I was able to get it working by setting the config content path to:

'./node_modules/@org/packageName/**/*.{html,js,svelte,ts}'

I figure I'll leave this post up just to confirm this is the best manner to solve this. Currently this requires one extra step for users consuming the library.

Could I perhaps instead add this content path to the Tailwind plugin I'm already shipping bundled into the component library itself? I had added this to extend the color palette using theme.extend

[N00nDay]

I too am dealing with this situation and have found a workaround by adding the node_module path to the content array in the tailwind.config.cjs file. This is fine as a temporary solution but I am seeing other packages that have solved this problem but I can not wrap my head around what they are doing that is allowing it to work "out of the box" without the need for the end user to update the content section. The libraries I have seen using this are Smelte: https://github.com/matyunya/smelte and Svelte-Headless UI: https://github.com/rgossiaux/svelte-headlessui/tree/f431f891271291c8db7c75fe00c7c19b2542a21d

[wongjn]

Smelte seems to use it's own extraction purge logic with Tailwind V2:

https://github.com/matyunya/smelte/blob/e795a60f32ddf39970237e794833a2505e29c2e9/rollup-plugin-smelte.js#L3
https://github.com/matyunya/smelte/blob/e795a60f32ddf39970237e794833a2505e29c2e9/rollup-plugin-smelte.js#L37-L42

So that may be how it is getting its styling.

Svelte-Headless UI "components are completely unstyled" so all the Tailwind classes should be in your own source files anyway

[N00nDay]

Your right about Headless I was mistaken about what I was looking at on their demo site. Hence the term "Headless". I came to the same conclusion about Smelte with the rollup-plugin-smelte.js but I have never really used rollup so I have no clue what I am looking at haha!

[sumanthneerumalla]

this worked for me when using a nextjs project as well, thx

[TJdhyani]

did this work with tailwind v3 + next.js as well?

[endigo9740]

Thanks for confirming this is affecting you as well. I haven't had a chance to test embedding this within our plugin yet but I think that may provide a more turnkey solution for end users. However, you're right, other libraries are not having to jump through this extra hoop.

I'm not sure about Headless, but I believe Smelte was still using Sapper at some point. Perhaps it's the difference between SvelteKit (which uses Vite) and Sapper (which used...snowpack? I think).

[N00nDay]

Are you building a component library for private consumption or for personal use? I have just started on mine. Most libraries like daisyui are class based and I would like to create something that is more component based. I only have 3 components but my goal is to embed child components inside one another similar to how antd handles it. Instead of having Card, CardHead, CardActions, and CardBody I am placing them all inside the Card component. So to use it you would use Card, Card.Head, Card.Body and, Card.Actions. You can use them whever you want but it eliminates the need to remember component names that belong together or classes outside of what tailwindcss provides.

[endigo9740]

Hmm, interesting idea. You can check out our library here, we're fairly far along!
https://skeleton.brainandbonesllc.com/

It's MIT licensed and open source. We launched a couple weeks ago and have had a great response. We were even featured on the official Svelte blog for this month's community showcase. There's two core maintainers (myself included) and we've had a few public contributions so far. Always down for more help if you're interested.

A couple things to note - we're about a day out from posting our first proposed roadmap, so lots of new work to be done soon. Plus we're going to be featured in a fairly major dev-focused news site most likely this week, so I'm anticipating a big influx of new users soon.

[N00nDay]

I can confirm Smelte is still using Sapper. The only difference I can think of is the contributors of Smelte have set up the packaging pipeline themselves, I am honestly not even sure if Sapper had a packaging script. Flowbite requires its users to add the node_module to the content array as well. Looks like a mix bag out their right now.

…

On Wed, Aug 10, 2022 at 2:09 PM Chris Simmons ***@***.***> wrote: Thanks for confirming this is affecting you as well. I haven't had a chance to test embedding this within our plugin yet but I think that may provide a more turnkey solution for end users. However, you're right, other libraries are not having to jump through this extra hoop. I'm not sure about Headless, but I believe Smelte was still using Sapper at some point. Perhaps it's the difference between SvelteKit (which uses Vite) and Sapper (which used...snowpack? I think). — Reply to this email directly, view it on GitHub <#7720 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3TJVJEVVMDMNTK4USYHYDVYPV53ANCNFSM5PVROZUA> . You are receiving this because you commented.Message ID: ***@***.*** com>

[N00nDay]

Thats awesome! Congratulations!

…

On Wed, Aug 10, 2022 at 2:33 PM Chris Simmons ***@***.***> wrote: Hmm, interesting idea. You can check out our library here, we're fairly far along! https://skeleton.brainandbonesllc.com/ It's MIT licensed and open source. We launched a couple weeks ago and have had a great response. We were even featured on the official Svelte blog for this month's community showcase. There's two core maintainers (myself included) and we've had a few public contributions so far. Always down for more help if you're interested. A couple things to note - we're about a day out from posting our first proposed roadmap, so lots of new work to be done soon. Plus we're going to be featured in a fairly major dev-focused news site most likely this week, so I'm anticipating a big influx of new users soon. — Reply to this email directly, view it on GitHub <#7720 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3TJVI5UBFG2IDQMMQ3NOLVYPYWXANCNFSM5PVROZUA> . You are receiving this because you commented.Message ID: ***@***.*** com>

[mdulc928]

However, you're right, other libraries are not having to jump through this extra hoop.

I think this is almost intentional since it does provide the consumer with more flexibility. I think the Tailwind/Svelte docs could improve on though is maybe having a mention of this scenario since there are so many people asking about how to do something like this.