Svelte Components loose their styling when imported from another package inside a monorepo.

[Wizzel1]

I have a monorepo with a "shared" package that contains some types and shared svelte components.

The components are styled with tailwind.

From the shared package, I am exporting my components like so:

import DefaultButton from './DefaultButton.svelte';
import IconButton from './IconButton.svelte';
import LinkButton from './LinkButton.svelte';

export { IconButton, DefaultButton, LinkButton };

for some reason the components loose all their styling in the extension but work as expected in my sveltekit app.
When I duplicate the component and place them in the extension package, they also work as expected.

Do you have any idea why this may be the case?

[aklinker1]

I have a similar setup for one of my projects and it works just fine, so there's something wrong with your setup.

Are you importing/including the CSS file that loads tailwind? Are you properly listing the shared files in the content field in your tailwind.config.js file?

[Wizzel1]

Of course I mindlessly copy pasted the apps config into the extension... 🤦‍♂️

I added the path to the shared components to both tailwind configs and it seems to work now.

Makes me wonder why all components were still working in the svelte app because I didn't update the apps tailwind config either.

[aklinker1]

Huh, weird. Glad you got it sorted!