使用shadcn下拉组件时，@/lib/utils需添加什么内容？

1. 创建对应文件路径 #

在项目根目录下新建 lib/utils 文件夹，根据项目语言类型创建文件：

• JavaScript项目：创建 lib/utils.js
• TypeScript项目：创建 lib/utils.ts

2. 添加cn工具函数 #

shadcn组件依赖cn函数合并类名字符串，即使不使用Tailwind，也需要这个函数保证组件正常运行。

JavaScript 版本（utils.js） #

export function cn(...classes) {
  return classes.filter(Boolean).join(' ');
}

TypeScript 版本（utils.ts） #

export function cn(...classes: (string | undefined | null | boolean)[]) {
  return classes.filter(Boolean).join(' ');
}

可选：兼容Tailwind的版本（若后续计划使用） #

如果之后打算引入Tailwind，可以替换为shadcn官方的cn实现（需先安装clsx和tailwind-merge依赖）：

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

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