⚡ Vite + React + TypeScript + TailwindCSS + shadcn/ui Setup Guide

This is a guide on how to simply set up a new Vite + React + TypeScript project with Tailwind CSS and Shadcn/ui components from scratch, as of 22^ndApril, 2025.

🧱 Step 1: Create Project

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

🌀 Step 2: Install TailwindCSS

npm install -D tailwindcss@^3.4 postcss@^8 autoprefixer@^10
npx tailwindcss init -p

🧾 Update tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

🧵 Update src/index.css

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

🛠️ Step 3: Configure Files

🔧 Update tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "jsx": "react-jsx",
    "esModuleInterop": true
  }
}

🔧 Update vite.config.json

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

🧩 Step 4: Install shadcn/ui

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-variants
npx shadcn@latest init

I usually use the following:

• New York (Reccomended)
• Neutral

🔘 Step 5: Test a Component

Install the button component:

npx shadcn@latest add button

Note: We use --force flag for now.

Update src/App.tsx to test the button:

import { useState } from "react";
import { Button } from "@/components/ui/button";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 bg-gray-100 min-h-screen flex flex-col items-center justify-center">
      <h1 className="text-2xl font-bold mb-4">
        Vite + React + TypeScript project with Tailwind CSS and Shadcn/ui
        components
      </h1>
      <Button onClick={() => setCount(count + 1)}>Count is {count}</Button>

      <p className="mt-12 text-sm font-thin text-gray-700">
        If you liked this resource, give it a star on{" "}
        <a
          href="https://github.com/Lightxxo/vite-react-typescript-tailwind-shadcn-template"
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-500 underline"
        >
          GitHub
        </a>
        !
      </p>
    </div>
  );
}

export default App;

Start the dev server:

npm run dev

✅ You should see the button styled with Tailwind and shadcn/ui.

©️ For future reference only. All steps verified to work as of 22^ndApril, 2025.