[bug]: Sidebar component uses incorrect Tailwind CSS syntax for CSS variables

[hughlv]

Bug Description

The sidebar component uses incorrect Tailwind CSS syntax for CSS custom properties, causing the sidebar to have zero width and not display properly.

Current Behavior

The sidebar component uses syntax like:

• w-(--sidebar-width)
• w-(--sidebar-width-icon)

This syntax doesn't work with Tailwind CSS and results in the sidebar having 0px width.

Expected Behavior

The sidebar should use proper Tailwind CSS arbitrary value syntax:

• w-[var(--sidebar-width)]
• w-[var(--sidebar-width-icon)]

Affected Code Locations

In the sidebar.tsx component, the following lines need correction:

1. Line ~173: w-(--sidebar-width) → w-[var(--sidebar-width)]
2. Line ~190: w-(--sidebar-width) → w-[var(--sidebar-width)]
3. Line ~221: w-(--sidebar-width) → w-[var(--sidebar-width)]
4. Line ~226: w-(--sidebar-width-icon) → w-[var(--sidebar-width-icon)]
5. Line ~232: w-(--sidebar-width) → w-[var(--sidebar-width)]
6. Line ~239: w-(--sidebar-width-icon) → w-[var(--sidebar-width-icon)]

Steps to Reproduce

1. Install the sidebar component using the CLI or copy from the website
2. Use the sidebar component in a Next.js app with the standard setup from docs
3. The sidebar will render with 0px width

Environment

• Next.js 15
• Tailwind CSS 3.x
• React 19

Fix

Replace all instances of w-(--sidebar-width) with w-[var(--sidebar-width)] and w-(--sidebar-width-icon) with w-[var(--sidebar-width-icon)] in the sidebar component.

This ensures Tailwind CSS properly interprets the CSS custom properties.

[robinWongM]

This syntax is supported by Tailwind CSS v3 & v4 though

https://v3.tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax:

<div class="fill-(--my-brand-color) ...">
  <!-- ... -->
</div>

This is just a shorthand for fill-[var(--my-brand-color)] that adds the var() function for you automatically.

[tlawrie]

I had the same problem. I am using tailwind v4 and the above fixed solved the issue