Repository: ui
Issue: [bug]: Installing Sidebar component overwrites and causes breaking changes in tailwind.config.js
Labels: bug

### Describe the bug

I wanted to try out the new **Sidebar** component. So, I ran:

```bash

npx shadcn@latest add sidebar

```

But during when `npm` is installing it, it updates the `tailwind.config.js`. However, most of configs I defined myself were retained, but the custom `theme.extend.spacing` has it's properties and values removed.

Below is the before and after of the `tailwind.config.js` between installing the **Sidebar** component:

- Before installing:
	```js
	// tailwind.config.js

	/**
	 * @format
	 * @type {import('tailwindcss').Config}
	 */
	
	// convert px to rem under the hood
	const BASE = 16; // your base size
	const rem = (px, key = px) => ({ [key]: `${px / BASE}rem` });
	
	export default {
		darkMode: ["class"],
		content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
		theme: {
			extend: {
				fontFamily: {
					inter: ["Inter", "sans-serif"],
					Montserrat: ["Montserrat", "sans-serif"],
				},
				borderRadius: {
					lg: "var(--radius)",
					md: "calc(var(--radius) - 2px)",
					sm: "calc(var(--radius) - 4px)",
				},
				colors: {
					lavenderBlue: "#EAECF0",
					babyMint: "#EBFFF2",
					slateGray: "#475467",
					white: {
						DEFAULT: "#FFFFFF",
						100: "#F6FCF7",
						200: "#F8F8F8",
					},
					black: {
						100: "#060606",
						200: "#484848",
					},
					yellow: {
						100: "#DFA510",
					},
					smoke: "#F5F5F5",
					darkGreen: {
						100: "#0A3E19",
					},
					lightGreen: {
						100: "#1A932E",
						200: "#92E8AB",
					},
					green: {
						100: "#8DAC94",
					},
					background: "hsl(var(--background))",
					foreground: "hsl(var(--foreground))",
					card: {
						DEFAULT: "hsl(var(--card))",
						foreground: "hsl(var(--card-foreground))",
					},
					popover: {
						DEFAULT: "hsl(var(--popover))",
						foreground: "hsl(var(--popover-foreground))",
					},
					primary: {
						DEFAULT: "hsl(var(--primary))",
						foreground: "hsl(var(--primary-foreground))",
					},
					secondary: {
						DEFAULT: "hsl(var(--secondary))",
						foreground: "hsl(var(--secondary-foreground))",
					},
					muted: {
						DEFAULT: "hsl(var(--muted))",
						foreground: "hsl(var(--muted-foreground))",
					},
					accent: {
						DEFAULT: "hsl(var(--accent))",
						foreground: "hsl(var(--accent-foreground))",
					},
					destructive: {
						DEFAULT: "hsl(var(--destructive))",
						foreground: "hsl(var(--destructive-foreground))",
					},
					border: "hsl(var(--border))",
					input: "hsl(var(--input))",
					ring: "hsl(var(--ring))",
					chart: {
						1: "hsl(var(--chart-1))",
						2: "hsl(var(--chart-2))",
						3: "hsl(var(--chart-3))",
						4: "hsl(var(--chart-4))",
						5: "hsl(var(--chart-5))",
					},
				},
				lineHeight: {
					0: "0",
				},
				spacing: {
					...rem(2),
					...rem(3),
					...rem(4),
					...rem(6),
					...rem(8),
					...rem(10),
					...rem(12),
					...rem(14),
					...rem(16),
					...rem(18),
					...rem(20),
					...rem(22),
					...rem(24),
					...rem(26),
					...rem(28),
					...rem(30),
					...rem(32),
					...rem(38),
					...
				},
				flexGrow: {
					2: "2",
				},
				zIndex: {
					1: 1,
				},
				screens: {
					tablet: "640px",
					// => @media (min-width: 640px) { ... }
	
					laptop: "1024px",
					// => @media (min-width: 1024px) { ... }
	
					desktop: "1280px",
					// => @media (min-width: 1280px) { ... }
	
					"desktop-lg": "1380px",
	
					wideScreen: "1536px",
					// => @media (min-width: 1536px) { ... }
	
					// for viewport heights
					"screen-tall": { raw: "(min-height: 800px)" },
					"screen-desktop": { raw: "(min-height: 1024px)" },
				},
			},
		},
		plugins: [
			require("tailwindcss-animate"),
			require("tailwind-scrollbar")({
				preferredStrategy: "pseudoelements",
				nocompatible: true,
			}),
		],
	};
	``` 

- After installing (I haven't touched anything):
	```js
	// tailwind.config.js

	/**
	 * @format
	 * @type {import('tailwindcss').Config}
	 */
	
	// convert px to rem under the hood
	const BASE = 16; // your base size
	const rem = (px, key = px) => ({ [key]: `${px / BASE}rem` });
	
	export default {
		darkMode: ["class"],
		content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
		theme: {
	    	extend: {
	    		fontFamily: {
	    			inter: ["Inter", "sans-serif"],
	    			Montserrat: ["Montserrat", "sans-serif"]
	    		},
	    		borderRadius: {
	    			lg: 'var(--radius)',
	    			md: 'calc(var(--radius) - 2px)',
	    			sm: 'calc(var(--radius) - 4px)'
	    		},
	    		colors: {
	    			lavenderBlue: '#EAECF0',
	    			babyMint: '#EBFFF2',
	    			slateGray: '#475467',
	    			white: {
	    				'100': '#F6FCF7',
	    				'200': '#F8F8F8',
	    				DEFAULT: '#FFFFFF'
	    			},
	    			black: {
	    				'100': '#060606',
	    				'200': '#484848'
	    			},
	    			yellow: {
	    				'100': '#DFA510'
	    			},
	    			smoke: '#F5F5F5',
	    			darkGreen: {
	    				'100': '#0A3E19'
	    			},
	    			lightGreen: {
	    				'100': '#1A932E',
	    				'200': '#92E8AB'
	    			},
	    			green: {
	    				'100': '#8DAC94'
	    			},
	    			background: 'hsl(var(--background))',
	    			foreground: 'hsl(var(--foreground))',
	    			card: {
	    				DEFAULT: 'hsl(var(--card))',
	    				foreground: 'hsl(var(--card-foreground))'
	    			},
	    			popover: {
	    				DEFAULT: 'hsl(var(--popover))',
	    				foreground: 'hsl(var(--popover-foreground))'
	    			},
	    			primary: {
	    				DEFAULT: 'hsl(var(--primary))',
	    				foreground: 'hsl(var(--primary-foreground))'
	    			},
	    			secondary: {
	    				DEFAULT: 'hsl(var(--secondary))',
	    				foreground: 'hsl(var(--secondary-foreground))'
	    			},
	    			muted: {
	    				DEFAULT: 'hsl(var(--muted))',
	    				foreground: 'hsl(var(--muted-foreground))'
	    			},
	    			accent: {
	    				DEFAULT: 'hsl(var(--accent))',
	    				foreground: 'hsl(var(--accent-foreground))'
	    			},
	    			destructive: {
	    				DEFAULT: 'hsl(var(--destructive))',
	    				foreground: 'hsl(var(--destructive-foreground))'
	    			},
	    			border: 'hsl(var(--border))',
	    			input: 'hsl(var(--input))',
	    			ring: 'hsl(var(--ring))',
	    			chart: {
	    				'1': 'hsl(var(--chart-1))',
	    				'2': 'hsl(var(--chart-2))',
	    				'3': 'hsl(var(--chart-3))',
	    				'4': 'hsl(var(--chart-4))',
	    				'5': 'hsl(var(--chart-5))'
	    			},
	    			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))'
	    			}
	    		},
	    		lineHeight: {
	    			'0': '0'
	    		},
	    		spacing: {},
	    		flexGrow: {
	    			'2': '2'
	    		},
	    		zIndex: {
	    			'1': '1'
	    		},
	    		screens: {
	    			tablet: '640px',
	    			laptop: '1024px',
	    			desktop: '1280px',
	    			'desktop-lg': '1380px',
	    			wideScreen: '1536px',
	    			'screen-tall': {
	    				raw: '(min-height: 800px)'
	    			},
	    			'screen-desktop': {
	    				raw: '(min-height: 1024px)'
	    			}
	    		}
	    	}
	    },
		plugins: [
			require("tailwindcss-animate"),
			require("tailwind-scrollbar")({
				preferredStrategy: "pseudoelements",
				nocompatible: true,
			}),
		],
	};
	```

### Affected component/components

Sidebar

### How to reproduce

1. Setup your `tailwind.config.js` and note the configs.
2. Run `npx shadcn@latest add sidebar` and you'd noticed `tailwind.config.js` has changed.
3. Compare result from **step 1** and **step 2** to see what has been removed and what has been added.
4. The problem is that it shouldn't do any other thing than to add the themes needed. It shouldn't remove configs I wrote for `themes.extend.spacing`.

![image](https://github.com/user-attachments/assets/9611faf3-44ff-413a-8b11-fc1d7a6b512d)


### Codesandbox/StackBlitz link

The above covers all these.

### Logs

```bash
npx shadcn@latest add sidebar
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/index.css
✔ Installing dependencies.
✔ The file button.tsx already exists. Would you like to overwrite? … yes
✔ The file input.tsx already exists. Would you like to overwrite? … yes
✔ Created 6 files:
  - src/components/ui/sidebar.tsx
  - src/components/ui/separator.tsx
  - src/components/ui/sheet.tsx
  - src/components/ui/tooltip.tsx
  - src/hooks/use-mobile.tsx
  - src/components/ui/skeleton.tsx
ℹ Updated 2 files:
  - src/components/ui/button.tsx
  - src/components/ui/input.tsx
```


### System Info

```bash
npm v10.9.0

Ubuntu OS, 24.04 LTS.
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues