What your project needs

Last updated: October 16, 2026

Prepare TypeScript, Tailwind, and the cn helper before you paste a Copy for Cursor bundle.

What you'll end with

A project that can compile @/lib/utils and apply Tailwind classes, so the paste does not stop on a missing helper.

Required

  • Next.js App Router

  • TypeScript

  • Tailwind CSS

  • clsx and tailwind-merge

react, react-dom, and next never appear in the copy's install line. The app is expected to have them.

Add cn

Put the shadcn cn helper at @/lib/utils. The @/ alias is whatever paths in tsconfig points at, usually src/.

bash
npm install clsx tailwind-merge

src/lib/utils.ts

Create this file. If the same function is already there, do not add a second one.

ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Check

Import cn from "@/lib/utils" in any file. You are done when that import typechecks.

The pasted instructions tell the agent to explain how to add shadcn structure, Tailwind, or TypeScript before editing files, when those are missing. Run that setup, then paste the full copy again.

What your project needs | DesignLayer