Setup

Prerequisites

Make sure you have Node.js and npm or pnpm installed.

1. Create a Next.js App

npx create-next-app@latest my-app -e with-tailwindcss --typescript

This sets up Next.js with Tailwind CSS and TypeScript out of the box.

2. Add Utility Function

Create a utils.ts file at lib/utils.ts with the following code:

 
// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

This cn function merges Tailwind class names intelligently and is used throughout dilkhush-ui components.

You’re now ready to start using dilkhush-ui components in your project.

💡 Pro Tip: Ensure your import paths match your project structure. If you’re using baseUrl in tsconfig.json, you can import with @/lib/utils instead of relative paths.