Quick Start Guide
Installation & Setup
Follow these steps to set up your Next.js project, Tailwind CSS, icon sets, and component library dependencies.
6 Steps
01Framework
Next.js Project Setup
$
npx create-next-app@latest my-project --typescript --eslint --app
cd my-project02Styling
Tailwind CSS v4 for Next.js
$
npm install tailwindcss @tailwindcss/postcss postcssConfiguration Snippet
typescript
03Vite Setup
Tailwind CSS for Vite (React)
$
npm install tailwindcss @tailwindcss/viteConfiguration Snippet
typescript
04UI Components
Headless UI Components
$
npm install @headlessui/react@latest05Icons
Lucide React Icons
$
npm install lucide-react06Helper Utils
Tailwind Merge & CLSX Utilities
$
npm i tailwind-merge clsxConfiguration Snippet
typescript