Tailwind + 디자인 토큰 설정

핵심 개념

tailwind.config.ts·CSS 변수·shadcn/ui 통합·다크모드·디자인 토큰 매핑 — 일관된 UI 기반.

본문

tailwind.config.ts

TS📋 코드 (35줄)

import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: ['class'],
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    container: { center: true, padding: '1rem', screens: { '2xl': '1400px' } },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}
export default config

CSS 변수 (라이트 + 다크)

CSS📋 코드 (34줄)

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --primary: 217 91% 60%;       /* 파랑 */
    --primary-foreground: 0 0% 100%;
    --accent: 262 83% 58%;        /* 보라 */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --border: 214 32% 91%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 222 47% 11%;
    --accent: 262 83% 58%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --border: 217 33% 17%;
  }
}

@layer base {
  * { @apply border-border; }
  body { @apply bg-background text-foreground; }
}

shadcn/ui 통합

BASH📋 코드 (9줄)

pnpm dlx shadcn-ui@latest init
# - Style: Default
# - Base color: Slate
# - CSS variables: Yes

# 컴포넌트 추가 (필요한 것만)
pnpm dlx shadcn-ui@latest add button input card dialog
pnpm dlx shadcn-ui@latest add dropdown-menu toast tabs
pnpm dlx shadcn-ui@latest add form select avatar

다크 모드 (next-themes)

BASH📋 코드 (1줄)

pnpm add next-themes

TSX📋 코드 (26줄)

// src/components/theme-provider.tsx
'use client'
import { ThemeProvider as NextThemesProvider } from 'next-themes'

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

// src/app/layout.tsx
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

// src/components/theme-toggle.tsx
'use client'
import { useTheme } from 'next-themes'
import { Moon, Sun } from 'lucide-react'

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? <Sun /> : <Moon />}
    </button>
  )
}

디자인 토큰 → 실제 사용

TSX📋 코드 (11줄)

// ✅ 권장 — CSS 변수
<button className="bg-primary text-primary-foreground rounded-md">
  Generate
</button>

<div className="border border-border rounded-lg p-4 bg-muted/50">
  Card
</div>

// ❌ 비권장 — 하드코딩
<button className="bg-blue-500 text-white">Generate</button>

폰트 (Inter + 한국어)

TSX📋 코드 (11줄)

// src/app/layout.tsx
import { Inter } from 'next/font/google'
import localFont from 'next/font/local'

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const pretendard = localFont({
  src: './fonts/Pretendard.woff2',
  variable: '--font-pretendard',
})

<html className={`${inter.variable} ${pretendard.variable}`}>

다음 챕터

CH.12 "Supabase 프로젝트".

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내 마스터 프로젝트의 Tailwind + 디자인 토큰 부분을 분석해서
실전 적용 + 개선 우선순위 3가지를 알려줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Tailwind + 디자인 토큰 관련 모범 사례·안티패턴 5개를
비교 분석해서 실전 적용를 위한 추천 방안을 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

내 프로젝트 전체에서 Tailwind + 디자인 토큰
최적화 가능 위치와 리스크를 보고해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 한국 1인 개발자 시장의
Tailwind + 디자인 토큰 트렌드와 차별화 포인트를 정리해줘.

⭐ 이것만 기억하세요

Tailwind + 디자인 토큰 설정은 이 3가지만 확실히 잡으세요

1.CSS 변수 = 라이트/다크 모드 한 번에 관리

2.shadcn/ui 통합으로 50개 컴포넌트 무료

3.다음 챕터에서 Supabase 셋업

💬 이 챕터 질문 보기

MASTER-PROJECT · CH.11 — 질문하거나 답변을 확인하세요

→

진행도 11 / 50

← 커리큘럼으로 ← 목록으로 (master-project)