search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
71.39k stars 4.3k forks source link

[bug]: Unable to download accordion with `npx shadcn@latest add accordion` #5263

Open KateZhang98 opened 1 day ago

KateZhang98 commented 1 day ago

Describe the bug

When I run the command 

npx shadcn@latest add accordion

I got: ✔ Checking registry. ⠋ Updating tailwind.config.js 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/repo/tailwind.config.js'


I'm using tailwind.config.ts instead of js, but I had no problem downloading other components, just the accordion one. 

### Affected component/components

Accordion

### How to reproduce

1. Have a nextjs repo with `tailwind.config.ts` file
2. run `npx shadcn@latest add accordion`

### Codesandbox/StackBlitz link

_No response_

### Logs

```bash
✔ Checking registry.
⠋ Updating tailwind.config.js
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/repo/dir/tailwind.config.js'

System Info

Nextjs 14
"devDependencies": {
    "@babel/core": "^7.24.9",
    "@babel/preset-env": "^7.24.8",
    "@babel/preset-typescript": "^7.24.7",
    "@clerk/testing": "^1.3.5",
    "@jest/globals": "^29.7.0",
    "@playwright/test": "^1.47.2",
    "@tailwindcss/typography": "^0.5.14",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.14.10",
    "@types/node-fetch": "^2.6.11",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.19",
    "babel-jest": "^29.7.0",
    "dotenv": "^16.4.5",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-environment-node": "^29.7.0",
    "jest-playwright-preset": "^4.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.5",
    "ts-jest": "^29.2.2",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.3"
  },

Before submitting

Sama-004 commented 1 day ago

i don't have any issues in installing the according. I am also using next js 14 and tailwind config ts. Can you try again downloading the component. Also it would be helpful if you provide your tailwind config

mp3por commented 1 day ago

You don't have tailwindcss installed properly. https://tailwindcss.com/docs/installation

KateZhang98 commented 1 day ago

i don't have any issues in installing the according. I am also using next js 14 and tailwind config ts. Can you try again downloading the component. Also it would be helpful if you provide your tailwind config

This is my tailwind.config.ts

import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

const config = {
  darkMode: ["class"],
  content: [
    "./src/app/**/*.{ts,tsx}", // Include app directory
    "./src/components/**/*.{ts,tsx}", // Include components directory
    "./src/lib/**/*.{ts,tsx}", // Include lib directory if it contains components
    ".src/styles/**/*.css", // Include global styles
  ],
  prefix: "",
  theme: {
    lineHeight: {
      ...defaultTheme.lineHeight,
      dense: "1.125",
    },
    letterSpacing: {
      tighter: "-0.04em",
      tight: "-0.02em",
      normal: "0",
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    screens: {
      xl: { max: "1439px" },
      lg: { max: "1279px" },
      md: { max: "1023px" },
      sm: { max: "767px" },
      xs: { max: "639px" },
      "2xs": { max: "413px" },
    },
    extend: {
      colors: {
        gray: {
          8: "#121317",
          12: "#1C1D22",
          20: "#2E3038",
          30: "#464853",
          40: "#5E616E",
          50: "#777A88",
          60: "#9194A1",
          70: "#ABAEBB",
          80: "#C7C9D1",
          90: "#E3E4E9",
          94: "#EEEFF1",
          98: "#F9FAFB",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
} satisfies Config;

export default config;
Sama-004 commented 1 day ago

i don't have any issues in installing the according. I am also using next js 14 and tailwind config ts. Can you try again downloading the component. Also it would be helpful if you provide your tailwind config

This is my tailwind.config.ts

import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

const config = {
  darkMode: ["class"],
  content: [
    "./src/app/**/*.{ts,tsx}", // Include app directory
    "./src/components/**/*.{ts,tsx}", // Include components directory
    "./src/lib/**/*.{ts,tsx}", // Include lib directory if it contains components
    ".src/styles/**/*.css", // Include global styles
  ],
  prefix: "",
  theme: {
    lineHeight: {
      ...defaultTheme.lineHeight,
      dense: "1.125",
    },
    letterSpacing: {
      tighter: "-0.04em",
      tight: "-0.02em",
      normal: "0",
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    screens: {
      xl: { max: "1439px" },
      lg: { max: "1279px" },
      md: { max: "1023px" },
      sm: { max: "767px" },
      xs: { max: "639px" },
      "2xs": { max: "413px" },
    },
    extend: {
      colors: {
        gray: {
          8: "#121317",
          12: "#1C1D22",
          20: "#2E3038",
          30: "#464853",
          40: "#5E616E",
          50: "#777A88",
          60: "#9194A1",
          70: "#ABAEBB",
          80: "#C7C9D1",
          90: "#E3E4E9",
          94: "#EEEFF1",
          98: "#F9FAFB",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
} satisfies Config;

export default config;

lgtm. What @mp3por mentioned can also happen. Try installing tailwind again