`ENOENT: no such file or directory, open '[...]/create-t3-turbo/packages/ui/unused.css'`

[galer7]

Issue

This happens when selecting all components in the ui-add command. It's probably caused by one/some of the component because for example when selecting only accordion this doesn't occur.

> create-t3-turbo@ ui-add /Users/galer7/p/create-t3-turbo
> turbo run ui-add

╭──────────────────────────────────────────────────────────────────────────╮
│                                                                          │
│                     Update available v2.3.3 ≫ v2.3.4                     │
│    Changelog: https://github.com/vercel/turborepo/releases/tag/v2.3.4    │
│             Run "npx @turbo/codemod@latest update" to update             │
│                                                                          │
│          Follow @turborepo for updates: https://x.com/turborepo          │
╰──────────────────────────────────────────────────────────────────────────╯
turbo 2.3.3

• Packages in scope: @acme/api, @acme/auth, @acme/auth-proxy, @acme/db, @acme/eslint-config, @acme/expo, @acme/github, @acme/nextjs, @acme/prettier-config, @acme/tailwind-config, @acme/tsconfig, @acme/ui, @acme/val
idators                                                                                                                                                                                                               • Running ui-add in 13 packages
• Remote caching disabled
┌ @acme/ui#ui-add > cache bypass, force executing 92a41119f0ef99dc 
│ 
│ > @acme/ui@0.1.0 ui-add /Users/galer7/p/create-t3-turbo/packages/ui
│ > pnpm dlx shadcn@latest add && prettier src --write --list-different
│ 
│ ✔ Which components would you like to add? › accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, chart, checkbox, collapsible, command, con
│ text-menu, dialog, drawer, dropdown-menu, form, hover-card, input, input-otp, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separa
│ tor, sheet, sidebar, skeleton, slider, sonner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip
│ ✔ Checking registry.
│ ✔ Updating ../../tooling/tailwind/web.ts
│ ⠋ Updating unused.css
│ Something went wrong. Please check the error below for more details.
│ If the problem persists, please open an issue on GitHub.
│ 
│ ENOENT: no such file or directory, open '/Users/galer7/p/create-t3-turbo/packages/ui/unused.css'
│ 
│  ELIFECYCLE  Command failed with exit code 1.
│ command finished with error: command (/Users/galer7/p/create-t3-turbo/packages/ui) /usr/local/bin/pnpm run ui-add exited (1)
└────>
@acme/ui#ui-add: command (/Users/galer7/p/create-t3-turbo/packages/ui) /usr/local/bin/pnpm run ui-add exited (1)

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    9.206s 
Failed:    @acme/ui#ui-add

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.

Fix

Create file packages/ui/unused.css

Version

8589f6f

[noxify]

seems the shadcn cli uses the value from https://github.com/t3-oss/create-t3-turbo/blob/main/packages/ui/components.json#L8 to add some custom classes.

[launchthatbrand]

I had the same issue. You just need to create the file in /packages/ui/unused.css, and run the command again.

[x-sss-x]

Even if you somehow manually install the sidebar, the width is not gonna work properly. Because the sidebar component uses Tailwind v4 syntax for some variables inside it.

function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  side?: "left" | "right";
  variant?: "sidebar" | "floating" | "inset";
  collapsible?: "offcanvas" | "icon" | "none";
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

  if (collapsible === "none") {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          // Here the w-(--sidebar-width) is tailwind-v4 syntax
          "bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col",
          className,
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
.....
.........
.............

We need bump of tailwind 4 in this project or else we need to adapt the sidebar.tsx code according to the tailwind v3 syntax

Here is the output

[x-sss-x]

Even if you somehow manually install the sidebar, the width is not gonna work properly. Because the sidebar component uses Tailwind v4 syntax for some variables inside it.

function Sidebar({
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children,
...props
}: React.ComponentProps<"div"> & {
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
}) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

if (collapsible === "none") {
return (
<div
data-slot="sidebar"
className={cn(
// Here the w-(--sidebar-width) is tailwind-v4 syntax
"bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col",
className,
)}
{...props}
>
{children}

);
}
.....
.........
.............
We need bump of tailwind 4 in this project or else we need to adapt the sidebar.tsx code according to the tailwind v3 syntax

Here is the output

Here is the solution I found with some syntax corrections.

1. Don't override the variable outside of the sidebar
2. Replace <CSS-Property>-(--var-name) to [<CSS-Property>:var(--var-name)]

[juliusmarminge]

Just use v3 of shadcn: https://v3.shadcn.com

I don't think we'll bump to v4 here until both web and mobile supports it

[CarlosZiegler]

@juliusmarminge I hope that will not take too much => https://www.nativewind.dev/blog/v5-migration-guide