[bug]:Sidebar width display abnormal

[SHEN-EN]

Describe the bug

Sidebar width display abnormal

Affected component/components

sidebar

How to reproduce

When I use the command pnpm dlx shadcn@latest add sidebar to download the component, the Sidebar component image in sidebar.tsx is as shown below

The css variable was not found.

Finally found globals.css generated is

.w-[--sidebar-width] {
width: --sidebar-width;
}

Codesandbox/StackBlitz link

No response

Logs

System Info

139.0.7258.139

Before submitting

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

[lbartroli]

I have the exact same issue

[lbartroli]

Check here for a workaround: #7979

[SHEN-EN]

Finally solved it using w-[var(--sidebar-width)]

[ZiJson]

You might use tailwind v3.
Tailwind v4 will turn w-[--sidebar-width] into w-(--sidebar-width), and then the broswer can recognize it.

There seem to have some potential issues using tailwind v3, if the component is wrote with v4. like sidebar
I suggest Sidebar component should be marked with v4 only or provide a tutorial for v3 user.

[hughlv]

You might use tailwind v3. Tailwind v4 will turn w-[--sidebar-width] into w-(--sidebar-width), and then the broswer can recognize it.

There seem to have some potential issues using tailwind v3, if the component is wrote with v4. like sidebar I suggest `Sidebar` component should be marked with v4 only or provide a tutorial for v3 user.

I did use v4 of tailwindcss but still encountered the same issue. Adding var solved this.