Next.js 15 TypeScript项目中Shadcn UI初始化失败问题

问题说明 #

在将Shadcn UI集成到新建的Next.js 15 TypeScript项目时，遇到两个核心问题：

1. Tailwind配置文件不兼容：Shadcn UI初始化脚本默认寻找tailwind.config.js，但项目使用的是tailwind.config.ts——手动执行npx tailwindcss --config tailwind.config.ts可正常运行，但初始化脚本报错。
2. 目录结构不匹配：初始化脚本要求项目存在src文件夹和index.css，但项目创建时特意未使用src目录，且全局样式文件为global.css。

项目创建流程 #

• 创建项目：npx create-next-app@latest my-app，配置选项为：使用TypeScript、ESLint、Tailwind CSS，不使用src目录，启用App Router、Turbopack，不自定义导入别名。
• 执行Shadcn初始化：npx shadcn@latest init

现象 #

执行初始化命令后，脚本报错找不到tailwind.config.js，同时提示缺少src文件夹和index.css。

修复方案 #

1. 解决Tailwind配置文件类型问题 #

Shadcn初始化脚本目前默认仅识别.js后缀的Tailwind配置文件，可通过两种方式处理：

• 临时重命名文件：先将tailwind.config.ts重命名为tailwind.config.js，完成Shadcn初始化后再改回原文件名。
• 手动指定配置路径：执行初始化命令时显式指定配置文件，命令如下：

  npx shadcn@latest init --tailwind-config tailwind.config.ts
  

2. 适配无src目录与global.css的结构 #

执行npx shadcn@latest init后，当脚本弹出以下询问时，输入对应路径即可适配自定义结构：

• Where is your global CSS file?：输入./app/global.css（根据实际文件路径调整，Next.js 15无src目录时默认在app文件夹下）
• Where is your tailwind.config.js located?：输入./tailwind.config.ts
• Configure the import alias for components?：输入@/components（无src目录时默认别名@/对应项目根目录）
• Configure the import alias for utils?：输入@/lib/utils

若初始化已失败，可手动在项目根目录创建components.json文件，内容示例如下（根据自身路径调整）：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/global.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

随后手动安装Shadcn基础依赖：

npm install lucide-react class-variance-authority clsx tailwind-merge

最后确保tailwind.config.ts的content数组包含组件路径，示例配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        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")],
}

同时确保global.css中包含Shadcn所需的CSS变量（若初始化未自动添加，手动补充）：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

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