{
  "id": 9234413,
  "title": "Setting Up shadcn/ui with Vite, React, TypeScript, and Tailwind CSS v4 using pnpm.",
  "url": "https://urgent.news/2026/09/23/setting-up-shadcn-ui-with-vite-react-typescript-and-tailwind-css-v4",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-23T01:13:34.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ignatium/setting-up-shadcnui-with-vite-react-typescript-and-tailwind-css-v4-using-pnpm-274g"
  },
  "original_language": "en",
  "account": "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`.\n\nNext, 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.\n\nWith 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.",
  "summary": "A quick walkthrough for manually spinning up a new Vite + React + TypeScript project with Tailwind CSS v4 and shadcn/ui. Hopefully this setup guide will help newer users understand the configuration alias structure and paths required for shadcn/ui to properly function, and give a step forward towards using other products with shadcn/ui like TanStack router and TanStack table. For an automated…",
  "key_points": [
    "Vite project created with React and TypeScript using pnpm",
    "Tailwind CSS v4 installed via Vite plugin with pnpm",
    "shadcn/ui added and basic component integrated into App.tsx"
  ],
  "editors_take": "This guide streamlines setting up a Vite + React + TypeScript project with Tailwind CSS v4 and shadcn/ui, making it easier for developers to integrate these technologies.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}