Repository: svelte
Issue: Add CSS @layer support for components, tailwind v4
Labels: css

### Describe the problem

The tailwind v4 alpha uses native cascade layers `@layer` which can be read about on the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer).

The component CSS that is rendered by sveltkit always puts CSS in the anonymous layer, which always takes precedence.

For example, a third party svelte component that looks like this:

```svelte
<script>
  const { class: clazz = '' } = $props();
</script>

<div class="blue { clazz }">WORDS</div>

<style>
  :where(.blue) {
    color: white;
    background: blue;
  }
</style>
```

And used like this

```svelte
<script>
  import Test from '$lib/test.svelte';

  import './styles.css';
</script>

<Test class="bg-red-500" />
```

With styles.css being

```css
@import "tailwindcss";
```

Will result in the background always being blue due to how CSS layers work with all the tailwind utility classes being the in the `@utilities`, layer. I feel this is somewhat unexpected to a developer using a component with tailwind, especailly given the component author has tried to remove the problem by using the `:where` pseudo class.

### Describe the proposed solution

I'm wondering if an option should be added to the sveltekit config to allow component CSS to be wrapped in a layer so it can be handled better with native CSS layers.

I've had success using this preprocess function (in Svelte 5)

```js
function svelteCssLayer(layerName) {
	return {
		name: 'svelte-css-layer',
		style: ({ content }) => {
			return {
				code: `@layer ${layerName} { ${content} }`
			}
		},
	}
}
```

My `svelte.config.js` file then looks like this.

```js
/** @type {import('@sveltejs/kit').Config} */
export default {
	preprocess: [svelteCssLayer('svelte'), vitePreprocess()],
	kit: {
		adapter: adapter()
	}
};
```

And my `styles.css` changes to:

```css
@layer theme, base, svelte, components, utilities;

@import "tailwindcss";
```

I have a codesandbox [here](https://codesandbox.io/p/devbox/unruffled-cdn-rcg8y8?embed=1&file=%2Fsrc%2Froutes%2Fstyles.css&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv4hmgcc00072v6gtn50sid0%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv4hmgcb00022v6gy9vavf21%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv4hmgcc00042v6gn0m6ekjw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv4hmgcc00062v6gsh915gz7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv4hmgcb00022v6gy9vavf21%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4hmgca00012v6gtdawgtxu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clv4itnht00022v6g226k279j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A1%252C%2522startColumn%2522%253A16%252C%2522endLineNumber%2522%253A1%252C%2522endColumn%2522%253A16%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Froutes%252F%252Bpage.svelte%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv4hmgcb00022v6gy9vavf21%2522%252C%2522activeTabId%2522%253A%2522clv4itnht00022v6g226k279j%2522%257D%252C%2522clv4hmgcc00062v6gsh915gz7%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4hmgcc00052v6gk7c1izqe%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clv4hmgcc00062v6gsh915gz7%2522%252C%2522activeTabId%2522%253A%2522clv4hmgcc00052v6gk7c1izqe%2522%257D%252C%2522clv4hmgcc00042v6gn0m6ekjw%2522%253A%257B%2522id%2522%253A%2522clv4hmgcc00042v6gn0m6ekjw%2522%252C%2522activeTabId%2522%253A%2522clv4hmgcc00032v6gunp6sm59%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4hmgcc00032v6gunp6sm59%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clv4hqo4100ex2v6gdhux0ncm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clv4hqo9n000jdjfb6ynl6e0r%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) that puts it all together.

### Alternatives considered

_No response_

### Importance

nice to have

### Additional Information

I think as tailwind v4 adoption grows, this is likely to become a larger issue. I'm not sure if this should target sveltekit, or svelte itself but I felt this interesting enough to raise an issue about.