Style Svelte components — scoped styles and the class directive built into the language, Tailwind utility classes, and shadcn-svelte components you own.
Why: a <style> block in a .svelte file applies its rules ONLY inside that component — automatically, with nothing to install. The class: directive adds a class while a condition is true, replacing string juggling for toggles.
<script lang="ts">
let active = $state(false)
</script>
<!-- class:active adds the class only while the condition is true -->
<button class:active onclick={() => (active = !active)}>
{active ? 'On' : 'Off'}
</button>
<style>
/* These rules apply ONLY to this component — automatically */
button {
border: 1px solid #ddd;
border-radius: 8px;
padding: 8px 16px;
}
.active {
background: #16a34a;
color: white;
}
</style>Why: utility classes live right on the element, and because class is just a string you can compute parts of it — conditional styles become ordinary JavaScript inside the braces. Note: the Tailwind course covers the utilities themselves; this is the Svelte side of the workflow.
<script lang="ts">
let { kind }: { kind: 'info' | 'error' } = $props()
</script>
<!-- class is just a string — embed expressions with braces -->
<div
class="rounded-lg border p-4 text-sm {kind === 'error'
? 'border-red-300 bg-red-50 text-red-800'
: 'border-blue-300 bg-blue-50 text-blue-800'}"
>
{kind === 'error' ? 'Something went wrong.' : 'Heads up!'}
</div>Why: instead of installing a component library you cannot change, shadcn-svelte copies accessible components — built on Bits UI primitives, styled with Tailwind — into your project. You own the code; restyle or rewrite anything.
$ pnpm dlx shadcn-svelte@latest init$ pnpm dlx shadcn-svelte@latest add button dialog<script lang="ts">
// The components are copied into YOUR project — edit them freely
import { Button } from '$lib/components/ui/button'
import * as Dialog from '$lib/components/ui/dialog'
</script>
<Dialog.Root>
<Dialog.Trigger>
{#snippet child({ props })}
<Button {...props} variant="destructive">Delete account</Button>
{/snippet}
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Are you absolutely sure?</Dialog.Title>
</Dialog.Header>
<Button variant="outline">Cancel</Button>
</Dialog.Content>
</Dialog.Root>