Create React project with Vite and set up Tailwind, shadcn/ui

Using Tailwind and shadcn/ui is common in React.
This is how to start a new React project with Tailwind and shadcn/ui.

Create a new project with Vite

Run this command to create a project

npm create vite@latest

Follow the instructions on console and set up your project such as your project name, framework (React), Javascript or Typescript (Typescript for now)

Install Tailwind

Add Tailwind and its configuration files to your project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Delete all existing codes and add bottom codes in src/index.css

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

Edit content as below in tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  /** ... **/
}

Configure paths

Edit tsconfig.json and tsconfig.app.json files to resolve paths
tsconfig.json

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

tsconfig.app.json

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

Now we also need to update vite.config.ts and install a package before the file

npm i -D @types/node

Then update vite.config.ts

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

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

Set up shadcn/ui

Run this command to set up

npx shadcn@latest init

Follow the instructions on console and configure your project
My usual configuration is as below:

• Style > Default
• Base color > Neutral
• CSS variables > No

Now set up is done and you can add components
To start, run the command to add button

npx shadcn@latest add button

Then you can use Tailwind and add button component to your project like below

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="bg-red-400">
      <Button>Click me</Button>
    </div>
  )
}