Svelte REPL problem

[jjagielka]

Describe the bug

When you try to create an example of flowbite-svelte code in svelte REPL the below error pops up:

Error compiling component
Could not find dist/theme/ in flowbite-svelte@1.8.3 (error occurred while trying to resolve . within npm://$/flowbite-svelte@1.8.3/dist/theme/Theme.svelte)

Reproduction

https://svelte.dev/playground/798e0510fa3c4074b8eb3bdb5ef89ad3?version=latest

Version and System Info

In cloud env

[shinokada]

sveltejs/svelte.dev#1333

[teemingc]

We think this is an issue with the package because it uses import.meta.env which only exists in Vite environments and not in the playground. sveltejs/svelte.dev#1410

[shinokada]

Now flowbite-svelte compiles on REPL without problems. However it seems Svelte REPL doesn't support tailwindcss/app.css etc, many components won't work on REPL, unfortunately.

[jjagielka]

You can add in head:

<svelte:head>
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <style type="text/tailwindcss">      
	@theme {        
	  --color-primary-50: #fff5f2;
	  --color-primary-100: #fff1ee;
	  --color-primary-200: #ffe4de;
	  --color-primary-300: #ffd5cc;
	  --color-primary-400: #ffbcad;
	  --color-primary-500: #fe795d;
	  --color-primary-600: #ef562f;
	  --color-primary-700: #eb4f27;
	  --color-primary-800: #cc4522;
	  --color-primary-900: #a5371b;
	}    
  </style>
</svelte:head>

Slightly painful but works. We can add that somewhere in the docs as a copy paste example.

[teemingc]

This is an issue with the Svelte playground. Tailwindcss is currently not configured to load plugins. sveltejs/svelte.dev#1554

[jjagielka]

@teemingc - I don't understand your point.

Check that example: https://svelte.dev/playground/5a4772b88bcb4e72a52391a092f36deb?version=latest

[teemingc]

Yes, but ideally we want an app.css file that we import in the Svelte component. And ideally, that file includes @plugin 'flowbite/plugin'; similar to the instructions here https://flowbite-svelte.com/docs/pages/quickstart#configuration don't think this works currently

[shinokada]

Yes, now I can import app.css.

The problem is that when I add a new component, I need to toggle Tailwind on/off to render the style as you see in the following gif. It happens just adding a text as well.
It should render the style without toggling the tailwind.

https://svelte.dev/playground/0073fecff3bf48f4a58d195a42b748cf?version=5.39.11