Setting Up shadcn/ui with Vite, React, TypeScript, and Tailwind CSS v4 using pnpm.

This document provides a step-by-step guide to manually configure a new Vite + React + TypeScript project with Tailwind CSS v4 and shadcn/ui. The tutorial begins by creating the Vite project using the command `pnpm create vite@latest my-app`, selecting the appropriate options along the way, such as the React framework and TypeScript variant.

After installation and startup of the development server, the guide proceeds to install Tailwind CSS v4 utilizing the Vite plugin with the command `pnpm add tailwindcss @tailwindcss/vite`.

Next, the process involves configuring folder aliases by editing the `vite.config.ts` file to add the Tailwind plugin and establish an alias for the `./src` directory. Simultaneously, `tsconfig.json` should be adjusted to include compiler options for file references and the necessary path aliases. As part of tailoring the project, the `tsconfig.app.json` file is also modified to incorporate the same path aliasing.

With the project setup, the guide instructs on incorporating Tailwind into the CSS by replacing the contents of `src/index.css` with an import statement for Tailwind. Verification of the installation is done by adding a simple text heading in `App.tsx` that leverages Tailwind's text styling. The final step in the setup involves adding shadcn/ui to the project using `pnpm dlx shadcn@latest init`, followed by creating a basic component, such as a button, via `pnpm dlx shadcn@latest add button`.

The guide then demonstrates how to integrate the newly installed component into the `App.tsx` file, concluding with a functional Vite + React + TypeScript environment that is configured for Tailwind CSS v4 and shadcn/ui.