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

[onyedikachi23]

Describe the bug

I wanted to try out the new Sidebar component. So, I ran:

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:

   // 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):

   // 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.

Codesandbox/StackBlitz link

The above covers all these.

Logs

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

npm v10.9.0

Ubuntu OS, 24.04 LTS.

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[opswiz]

may be, It would be nice if the shadcn config is written in a file as a preset and then that is imported in tailwind. one can easily extend the preset and override if required and original content can be left as so when installing new components user configuration won't be overridden.

[onyedikachi23]

Yes @opswiz. When I installed the Sidebar for the first time and my whole webpages UI looked horrible, I thought it didn't install properly and had to discard all changes made during the installation and try again.

It was after the 3rd trial I noticed the tailwind.config.js was being updated during the installation and had to check what's changed.

Felt frustrated to see that all was in my themes.extend.spacing was gone.

I fixed it by copying the spacing configs from the previous state of the file.

I also noticed some configs I made as numbers like

{
    0: 0
}

is changed to:

{
    "0": "0"
}

I just wonder why it's changing them to strings.

[guiguicdd]

UP! Some classes stopped working in tailwind

[onyedikachi23]

@guiguicdd can you give a better description of the problem you're facing?

[guiguicdd]

@onyedikachi23 I created an test for it. Just by adding the sidebar and configuring in nextjs 15 and react 18 like this:

<SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
</SidebarProvider>

export default function Home() {
  return (
    <div className="h-screen w-full bg-blue-950">
      <div className="w-96 h-96 bg-red-600 float-end"></div>
      <div className="w-96 h-10 bg-black"></div>
    </div>
  );
}

It will remove de blue bg, div size and the alingment. It doesn't event show in the devtools
Reference (shadcn docs)

[onyedikachi23]

Can't see where you added the Home component in the Sidebar.