Components don't render when imported as reexport from another package

[Wizzel1]

Describe the bug

So I am trying to setup shadcn in a components package in my monorepo. This components package has been created with npx sv create so its a standard svelte 5 project. I ran pnpm dlx shadcn-svelte@next init to setup shadcn and added a tooltip with pnpm dlx shadcn-svelte@next add tooltip.

I then re-exported this tooltip from the packages `index.ts

export * as Tooltip from './components/ui/tooltip/index.js';

and ran the pnpm package command.

When I try to use the tooltip like so:

<script lang="ts">
import { Tooltip } from '@podsuite/components';
import type { Snippet } from 'svelte';
interface Props {
  title: string;
  children?: Snippet;
}

let { title, children }: Props = $props();
</script>

<Tooltip.Provider delayDuration={200}>
	<Tooltip.Root>
		<Tooltip.Trigger>{@render children?.()}</Tooltip.Trigger>
		<Tooltip.Content
			class="hidden lg:flex max-w-[10rem] items-center justify-center hyphens-auto break-words"
		>
			<p class="text-center">{title}</p>
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>

the component doesn't get rendered and doesn't even appear in the Dom.

Reproduction

.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 13.25 GB / 31.93 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.4.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.68)
    Internet Explorer: 11.0.19041.4355

Severity

blocking an upgrade

[ieedan]

Did you setup your tailwind config so that your internal component library's css is included?

[Wizzel1]

Did you setup your tailwind config so that your internal component library's css is included?

I am not sure, I basically just followed the instructions. Do you mean the packages/components/src/app.css needs to be imported into the packages/components/tailwind.config.ts file?

[ieedan]

I believe you need to setup the content.

https://tailwindcss.com/docs/content-configuration

[Wizzel1]

I believe you need to setup the content.

https://tailwindcss.com/docs/content-configuration

Yes the shadcn cli set up a tailwind.config.ts file that already includes content: ['./src/**/*.{html,js,svelte,ts}'],

[ieedan]

I think you need to setup your content in the project consuming your ui library to point to the ui library

[ieedan]

So if your structure is

- ui
- site
  - tailwind.config.ts

You need to setup the tailwind.config.ts to parse all the svelte html and ts files in ui.

[Wizzel1]

I think I found the problem. In my app I had installed another version of bitsui and I think this clashed with the @next version of the components package. I then added the components package to the apps tailwind config and everything works now. Maybe I should create a single tailwind config file for my entire project...

Thanks!