SvelteKit Global Styles and TailwindCSS Bug

Describe the bug

Hi
I'm not sure that this is related to SvelteKit or Svelte or Tailwind. I only test this white SvelteKit.
The problem is in index.svelte global border-2 style. The first box border colors must be emerald-500, not gray-200. this gray-200 added with the border-2 class.

Reproduction

https://github.com/babakfp/sveltekit-tailwind-bug

Logs

No response

System Info

_

Severity

annoyance

Additional Information

No response

[cgarfio]

I think you forgot to add your component in the first COMPONENT

your code is like so:

// index.svelte
<div class="content">CONTENT</div>

<div>
  <Comp class="my-content">MY CONTENT</Comp>
</div>

I simply did this:

// index.svelte

<!-- <Comp/> was missing -->
<div>
  <Comp class="content">MY CONTENT</Comp>
</div>

<div>
  <Comp class="my-content">MY CONTENT</Comp>
</div>

Result

Also, Happy Code 😁

[dominikg]

This is not an issue with sveltekit itself. Please use discord or github discussions for questions.

To find out if something is caused by sveltekit you can try to reproduce the it in a regular vite+svelte project npm init vite -t svelte.

I think you forgot to add your component in the first COMPONENT

your code is like so:

// index.svelte
<div class="content">CONTENT</div>

<div>
  <Comp class="my-content">MY CONTENT</Comp>
</div>

I simply did this:

// index.svelte

<!-- <Comp/> was missing -->
<div>
  <Comp class="content">MY CONTENT</Comp>
</div>

<div>
  <Comp class="my-content">MY CONTENT</Comp>
</div>

Result

Also, Happy Code 😁

Thank you, but no, that isn't the reason🤦‍♂️ I'm not blind😐😂 (but yeah, happens sometimes)