TechLog
블로그로 돌아가기

Tauri + React + Tailwind CSS v4 + shadcn/ui 설정 가이드

(수정됨: 2026년 3월 14일)
reactsetup

pnpm 또는 npm과 TypeScript를 사용했습니다.

1. 패키지 설치

Tailwind CSS v4

pnpm:

Bash
pnpm add -D tailwindcss@latest @tailwindcss/vite@latest

npm:

Bash
npm install -D tailwindcss@latest @tailwindcss/vite@latest

shadcn/ui 필수 의존성

pnpm:

Bash
pnpm add class-variance-authority clsx tailwind-merge lucide-react

npm:

Bash
npm install class-variance-authority clsx tailwind-merge lucide-react

Node.js 타입 정의

pnpm:

Bash
pnpm add -D @types/node

npm:

Bash
npm install -D @types/node

2. 파일 생성

src/index.css

CSS
@import "tailwindcss";

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1450 0 0);
  /* ... 기타 CSS 변수들 */
}

.dark {
  --background: oklch(0.1450 0 0);
  --foreground: oklch(0.9850 0 0);
  /* ... 다크 모드 변수들 */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... 테마 변수 매핑 */
}

src/lib/utils.ts

TYPESCRIPT
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

components.json

JSON
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

3. 파일 수정

vite.config.ts

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

const host = process.env.TAURI_DEV_HOST;

export default defineConfig(async () => ({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  // ... 나머지 Tauri 설정
}));

tsconfig.json

JSON
{
  "compilerOptions": {
    // ... 기존 설정
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

src/main.tsx

TYPESCRIPT
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css"; // 또는 "./globals.css"

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

src/App.tsx

TYPESCRIPT
function App() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold">Hello, Tauri + React</h1>
    </div>
  );
}

export default App;

4. shadcn/ui 컴포넌트 추가 방법

Bash
npx shadcn@latest add button
npx shadcn@latest add card
# 필요한 컴포넌트 추가...

컴포넌트는 src/components/ui/ 폴더에 자동 생성됩니다.

5. 주요 특징

  • Tailwind CSS v4: 최신 v4.1.18 사용, Vite 플러그인으로 통합
  • Path Alias: @/*로 src/* 경로 단축 사용 가능
  • 테마 시스템: CSS 변수 기반, 라이트/다크 모드 지원
  • shadcn/ui: 컴포넌트 라이브러리 준비 완료

댓글