Use M3 Svelte

1

Install M3 Svelte with npm i m3-svelte (or your package manager)
2

StyleFromScheme

Manual
Copy a theme snippet and paste it on your site.
+layout.svelte or similar
```
<script>
  import { StyleFromScheme } from "m3-svelte";
</script>

[your theme snippet]
```

Get a font for M3 Svelte to use.

app.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />

Great. M3 Svelte components now function as expected, but you might want to do more.

Make your body match up with the rest of M3 Svelte

app.html

<body class="m3-font-body-large">

app.css

body {
  background-color: rgb(var(--m3-scheme-background));
  color: rgb(var(--m3-scheme-on-background));
}

Start using components

+page.svelte

<script>
  import { Button } from "m3-svelte";
</script>

<Button type="filled" on:click={() => alert("Hello world!")}>Hello world!</Button>

Start using variables

Plain Tailwind

+page.svelte

button {
  background-color: rgb(var(--m3-scheme-surface-container-low));
  color: rgb(var(--m3-scheme-primary));
  box-shadow: var(--m3-util-elevation-1);
  border-radius: var(--m3-util-rounding-full);
}

Have fun!
(FYI if your app.css isn't working, make sure you imported it from where your app gets mounted, like in +layout.svelte.)