A step-by-step guide to set up a React (TypeScript) project with Tailwind CSS, ShadCN, and TanStack Router using Vite.

🚀 1️⃣ Create a New Vite + React (TypeScript) Project

Run the following command to create a new project:

npm create vite@latest my-app --template react-ts

Then, navigate into the project folder:

cd my-app

---

🎨 2️⃣ Install Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Generate the Tailwind configuration files:

npm list tailwindcss
echo "module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 
theme: { extend: {}, }, plugins: [], };" > tailwind.config.js
echo "module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };" > 
postcss.config.js

Finally, import Tailwind into your styles:

• Open src/index.css and replace the contents with:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

🎭 3️⃣ Install ShadCN/UI

ShadCN provides pre-built UI components.

First, install ShadCN:

npm install -g shadcn-ui

Initialize it:

npx shadcn@latest init

Replace the content of tsconfig.json with:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

When prompted:

• TypeScript: Yes
• Tailwind CSS: Yes
• Alias (@/components/ui): Press Enter (default)
• Confirm installation: Yes

Now, install the UI components you need (e.g., button, input):

npx shadcn@latest add button input

---

🚏 4️⃣ Install TanStack Router

TanStack Router is a powerful alternative to React Router.

npm install @tanstack/react-router
npm install -D @tanstack/router-plugin @tanstack/router-devtools

Set up a router file src/lib/router.tsx:

import { createRouter, RouterProvider } from "@tanstack/react-router";
import { Route, RootRoute } from "@tanstack/react-router";
import HomePage from "@/pages/HomePage";

const rootRoute = new RootRoute();
const homeRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: HomePage,
});

const routeTree = rootRoute.addChildren([homeRoute]);

const router = createRouter({
  routeTree,
  notFoundComponent: () => <h1>404 Not Found</h1>,
});

export { router, RouterProvider };

Now, wrap your app in main.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { RouterProvider, router } from "@/lib/router";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

---

✅ 5️⃣ Start the Development Server

Run:

npm run dev

Visit http://localhost:5173/, and you have: ✔ React + TypeScript
✔ Tailwind CSS
✔ ShadCN UI
✔ TanStack Router

🔥 Now, you're ready to build! 🚀