Sorry, if this bug is my own fault, i am new and still learning and want to contribute in open source community, also i found this issue and solve it on my own, but i use AI to write this issue on github, because i am terrible in english.

I followed the official Solid UI installation guide for Tailwind CSS v3. When adding the Sidebar component via solidui-cli, the sidebar overlaps with the main page content.

After debugging, I found that the generated sidebar.tsx file uses Tailwind CSS v4 syntax for arbitrary values (parentheses) instead of the v3 syntax (square brackets) required by the version specified in the documentation.

To Reproduce

1. Install solid from solid docs.

2. Tailwind CSS v3 as per the solidui docs.

3. Install the sidebar component using pnpm:

   pnpm dlx solidui-cli@latest add sidebar
   

4. Implement the SidebarProvider and Sidebar in a layout.

5. Observe that the div has no width, causing content to slide under the sidebar.

Expected behavior

The CLI should generate code compatible with Tailwind CSS v3. The classes should use square brackets, e.g.,w-[--sidebar-width], so that the layout renders side-by-side correctly.

Technical Details
The generated code currently contains:

w-(--sidebar-width)

w-(--sidebar-width-icon)

max-w-(--skeleton-width)

These classes do not generate any CSS in a Tailwind v3 environment.

Solution

Changing all instances of parentheses to square brackets in sidebar.tsx resolves the issue:

Change w-(--sidebar-width) to w-[--sidebar-width]

Change max-w-(--sidebar-width) to max-w-[--sidebar-width]

Environment:

Package Manager: pnpm

Tailwind Version: v3.x

CLI: solidui-cli (latest)

Framework: SolidRouter / Vite

NOTE

When i run the pnpm command to install the component it add the component file in my component/ui folder but show this error:

    Installing tooltip│
    └  ExecaError: Command failed with exit code 1: pnpm add '' '@kobalte/core'
    
    ../..                                    | Progress: resolved 1, reused 0, downloaded 0, added 0
    \u2009ERR_PNPM_SPEC_NOT_SUPPORTED_BY_ANY_RESOLVER\u2009 "latest" isn't supported by any available resolver.

This happen with every component i am trying to add using pnpm but it add the file in my folder so i always use this and install the external dependencies after which component require to run like solid-sonner for toast after that.