TechLog
블로그로 돌아가기

Next.js에서 Tailwind CSS v4 + shadcn/ui 수동 설정하기

(수정됨: 2026년 3월 29일)
tipreactnextjs

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

1. 프로젝트 생성

Bash
npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

create-next-app의 프롬프트에서 Tailwind CSS 사용 여부를 물으면 No를 선택합니다. 수동으로 v4를 설정하기 위함입니다.

2. 패키지 설치

Tailwind CSS v4 (PostCSS 방식)

Next.js는 Vite 플러그인 대신 PostCSS 플러그인을 사용합니다.

pnpm:

Bash
pnpm add tailwindcss @tailwindcss/postcss postcss

npm:

Bash
npm install tailwindcss @tailwindcss/postcss postcss

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

3. 파일 생성

postcss.config.mjs

Tauri에서는 Vite 플러그인(@tailwindcss/vite)을 사용하지만, Next.js에서는 PostCSS 플러그인을 사용합니다.

JAVASCRIPT
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

src/app/globals.css

Next.js App Router 기준으로 src/app/globals.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

Tauri 설정과의 차이점: rsc가 true이고, CSS 경로가 src/app/globals.css입니다.

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

4. 파일 수정

tsconfig.json

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

create-next-app으로 생성한 경우 @/* alias가 이미 설정되어 있을 수 있습니다.

src/app/layout.tsx

TYPESCRIPT
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "My App",
  description: "Next.js + Tailwind CSS v4 + shadcn/ui",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

src/app/page.tsx

TYPESCRIPT
export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold">Hello, Next.js + Tailwind v4</h1>
    </div>
  );
}

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

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

또는 shadcn init으로 한 번에 초기화할 수도 있습니다:

Bash
npx shadcn@latest init

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

6. Tauri 설정과의 차이점

항목Tauri (Vite)Next.js
Tailwind 통합 방식@tailwindcss/vite (Vite 플러그인)@tailwindcss/postcss (PostCSS 플러그인)
설정 파일vite.config.ts에 플러그인 추가postcss.config.mjs 별도 생성
CSS 파일 위치src/index.csssrc/app/globals.css
엔트리 포인트src/main.tsx에서 CSS importsrc/app/layout.tsx에서 CSS import
RSC 지원false (클라이언트 전용)true (React Server Components)
tailwind.config.js불필요 (v4)불필요 (v4)

7. 주요 특징

  • Tailwind CSS v4: CSS-first 설정, tailwind.config.js 불필요
  • PostCSS 통합: Next.js의 빌드 파이프라인과 자연스럽게 연동
  • Path Alias: @/*로 src/* 경로 단축 사용 가능
  • 테마 시스템: CSS 변수 기반, @theme inline으로 라이트/다크 모드 지원
  • shadcn/ui: RSC 호환, 컴포넌트 라이브러리 준비 완료
  • App Router: Next.js 15의 App Router 기반 구조

댓글