Next.js项目中如何用Yarn/Npm安装shadcn/ui组件库？

一、使用npm安装 #

• 进入你的Next.js项目根目录
• 执行初始化命令，完成shadcn/ui配置：

  npx shadcn-ui@latest init
  

  按提示完成以下配置：
  • 指定组件输出目录（推荐components/ui）
  • 确认Tailwind CSS配置文件路径（默认tailwind.config.js即可）
  • 选择颜色方案（如slate）
  • 启用CSS变量（推荐选择“是”）
  • 设置组件导入路径别名（如@/components/ui）
• 安装所需组件（以按钮为例，替换为你需要的组件名即可）：

  npx shadcn-ui@latest add button
  

二、使用Yarn安装 #

• 进入项目根目录
• 执行初始化命令：

  yarn dlx shadcn-ui@latest init
  

  按提示完成和npm流程一致的配置选项
• 安装组件：

  yarn dlx shadcn-ui@latest add button
  

失败排查要点 #

• 确保Node.js版本≥16.0.0，过低版本会导致命令执行失败
• 确认项目已安装Tailwind CSS、PostCSS和Autoprefixer，未安装则先执行：
  npm：

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

  Yarn：

  yarn add -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

• 检查Tailwind配置文件的content数组，确保包含shadcn组件所在目录：

  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // 若组件存放在其他目录，需补充对应路径
  ],
  

内容的提问来源于stack exchange，提问作者Janani