Sidebar docs don't mention editing tailwind config

[ptlthg]

Change Type

Addition

Proposed Changes

The sidebar instructions say to:

1. Add the sidebar components
2. Add CSS variables for colors

These instructions are missing the third step of:

3. Add the following to theme.extend.colors in your tailwind config file if missing:

sidebar: {
	DEFAULT: "hsl(var(--sidebar-background))",
	foreground: "hsl(var(--sidebar-foreground))",
	primary: "hsl(var(--sidebar-primary))",
	"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
	accent: "hsl(var(--sidebar-accent))",
	"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
	border: "hsl(var(--sidebar-border))",
	ring: "hsl(var(--sidebar-ring))",
},

I'm not sure if a new installation of shadcn-svelte includes this section for you in the config, but I was missing this section after migrating to @next a little while back and was very confused on what I was missing.

[ieedan]

Re-running init would add the variables to your tailwind.config. npx shadcn-svelte@next init.

Not sure if this necessarily warrants a step in the docs since it is a part of setup and in the migration docs...

[ieedan]

Actually reading through the migration docs I forgot to mention adding the colors for sidebar in the manual steps. I can open a PR to fix that.

[ptlthg]

Adding it there would be fine too, thanks. I think that at least adding a note to the sidebar page to check the migration guide would be good then, I also saw a post in the discord where someone had the same issue as me.