[FE] Vite + React + TypeScript + Shadcn/ui + TailwindCSS 프로젝트 세팅

React + Vite + TypeScript 설치

npm create vite@latest [프로젝트명] --template react-ts

Shadcn/ui + TailwindCSS 설치

https://ui.shadcn.com/docs/installation/vite

tailwindCSS 선 설치 후 Shadcn/ui 설치

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

최상위 css 파일에 코드 추가(index.css)

@import "tailwindcss";

Edit tsconfig.json file

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

Edit tsconfig.app.json file

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

Update vite.config.ts

npm install -D @types/node

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

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

Shadcn/ui 설치

npx shadcn@latest init

⚠️ 주의할 점

tailwindCSS 설치 > config 설정 > shadcn/ui 설치 순서를 지켜야 한다. 앞의 것들이 설정되어있지 않으면 설치 안됨.

1. tailwindCSS를 먼저 설치하고
   ✅ Validating Tailwind CSS
2. tsconfig.json/tsconfig.app.json/vite.config.ts 파일을 수정
   ✅ Validating import alias