Quick Setup

Quick Setup

To use Indie UI, you need to set up Tailwind CSS, clsx, and tailwind-merge for your project. Follow the instructions below to install these dependencies.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that is highly customizable and allows you to build modern websites without ever leaving your HTML.

Learn how to setup tailwind CSS in your project by following the instructions in the Tailwind documentation.

Utility function

To install Tailwind CSS, run the following command in your project directory:

pnpm add clsx tailwind-merge

Create a file cn.ts. This function is designed to work with Tailwind CSS and clsx to generate class strings.

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