How to Add Tailwind CSS and shadcn/ui to Vite.js with Cursor

What You'll Build

You'll end up with a modern Vite.js project that includes:

Tailwind CSS for utility-first styling
shadcn/ui components with proper TypeScript support
Path aliases for clean imports
All configured and working together

Prerequisites

A Vite.js project (React + TypeScript)
Cursor (or any AI-powered editor)
Node.js installed

If you don't have a Vite project, create one:

pnpm create vite@latest my-project --template react-ts
cd my-project

The AI Prompt: Tell Cursor to Add Everything

Copy this prompt and paste it into Cursor:

**"I have a fresh Vite.js React + TypeScript project. Please help me add Tailwind CSS and set up shadcn/ui completely. Use pnpm for all package management.

Follow these exact steps:

Install Tailwind CSS and its Vite plugin:
```
pnpm add tailwindcss @tailwindcss/vite
```
Install TypeScript types for Node.js:
```
pnpm add -D @types/node
```

Update vite.config.ts to include the Tailwind plugin and path aliases:

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

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

Replace everything in src/index.css with:
```
@import "tailwindcss";
```

Update tsconfig.json to add path aliases:

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

Update tsconfig.app.json to add path aliases:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Initialize shadcn/ui with neutral color scheme:
```
pnpm dlx shadcn@latest init
```
When prompted, use these exact answers:
- Which color would you like to use as base color? › Neutral

Add some basic components:

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add input

Update src/App.tsx to show the components:

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"

function App() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-md mx-auto space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Welcome to your app</CardTitle>
            <CardDescription>This uses Tailwind CSS and shadcn/ui</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <Input placeholder="Type something..." />
            <Button>Click me</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default App

Make sure everything works together and the styling looks good. Test that it compiles without errors."**

Verification: Test That It Works

Start the dev server:
```
pnpm dev
```
Check the browser: You should see a card with input and button components, properly styled with Tailwind CSS.
Test TypeScript: The imports should work without errors.

Why use Pinacle to build your next project

If you enjoyed using Cursor AI for this setup, you might like Pinacle — a cloud development environment where you can run Cursor CLI (and other AI coding tools) 24/7 without tying up your local machine.

Pinacle gives you:

Pre-installed tools — Cursor CLI, Claude Code, and more ready to use
Persistent environments — your AI assistants keep working even when you close your laptop
Full root access — install any packages or tools you need
Browser-based — develop from any device, anywhere

Next Steps

Now that you have Tailwind + shadcn set up, try:

FAQ

Do I need a paid Cursor subscription for this?

No, Cursor's free tier includes AI assistance. The AI features used here work with the free plan.

What if I'm not using Pinacle?

This works with any local Cursor installation. Pinacle just makes it more convenient by having everything pre-configured.

Can I use Claude Code instead of Cursor?

Yes, the same prompting approach works with Claude Code or any AI coding assistant that can edit files.

Will this work with JavaScript instead of TypeScript?

Yes, but you'll need to adjust the prompts to skip TypeScript path configuration. TypeScript is recommended for better development experience.

What if the AI gets stuck or makes mistakes?

AI isn't perfect. You can always fall back to the official documentation or ask follow-up questions to correct issues.

This setup works great for modern React development. If you run into issues, the Pinacle community is here to help.