섹션
컴포넌트
1. 프로젝트 만들기#
Vite로 새 React + TypeScript 프로젝트를 만듭니다.
pnpm create vite@latest my-app -- --template react-tsnpm create vite@latest my-app -- --template react-tsyarn create vite@latest my-app -- --template react-tsbun create vite@latest my-app -- --template react-ts
2. Tailwind CSS 설치하기#
pnpm add tailwindcss @tailwindcss/vitenpm install tailwindcss @tailwindcss/viteyarn add tailwindcss @tailwindcss/vitebun add tailwindcss @tailwindcss/vite
src/index.css의 내용을 모두 다음으로 교체합니다.
@import "tailwindcss";3. 경로 별칭 설정하기#
@/* 별칭이 해석되도록 tsconfig.json과 tsconfig.app.json 양쪽에 baseUrl과
paths를 추가합니다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}4. vite.config.ts 업데이트하기#
Node 타입을 설치한 다음, Vite에 별칭 해석 방법을 알려 줍니다.
pnpm add -D @types/nodenpm install -D @types/nodeyarn add -D @types/nodebun add -D @types/node
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})5. 초기화 실행하기#
pnpm dlx shadcn@latest initnpx shadcn@latest inityarn dlx shadcn@latest initbunx --bun shadcn@latest init
6. Neobrutalism 레지스트리와 테마 추가하기#
Neobrutalism 레지스트리를 components.json에 추가한 다음,
폰트와 테마를 설정합니다.
{
"registries": {
"@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
"@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
}
}7. 컴포넌트 추가하기#
pnpm dlx shadcn@latest add @neobrutalism/buttonnpx shadcn@latest add @neobrutalism/buttonyarn dlx shadcn@latest add @neobrutalism/buttonbunx --bun shadcn@latest add @neobrutalism/button