components.json

tailwind

CLI가 프로젝트에서 Tailwind CSS가 어떻게 구성되어 있는지 파악하도록 돕는 설정이에요.

Tailwind CSS를 설정하는 방법은 설치 섹션을 참고해 주세요.

tailwind.config

tailwind.config.js 파일이 위치한 경로예요.

{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}

tailwind.css

Tailwind CSS를 프로젝트로 가져오는 CSS 파일의 경로예요.

{
  "tailwind": {
    "css": "styles/global.css"
  }
}

tailwind.baseColor

컴포넌트의 기본 색상 팔레트를 생성하는 데 사용돼요. 초기화 후에는 변경할 수 없어요.

{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

tailwind.cssVariables

테마링을 위해 CSS 변수를 쓸지, Tailwind CSS 유틸리티 클래스를 쓸지 선택할 수 있어요.

테마링에 유틸리티 클래스를 사용하려면 tailwind.cssVariables를 false로 설정하세요. CSS 변수를 사용하려면 tailwind.cssVariables를 true로 설정하면 돼요.

{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

자세한 내용은 테마링 문서를 참고해 주세요.

초기화 후에는 변경할 수 없어요. CSS 변수와 유틸리티 클래스 사이를 전환하려면 컴포넌트를 삭제하고 다시 설치해야 해요.

tailwind.prefix

Tailwind CSS 유틸리티 클래스에 사용할 접두사(prefix)예요. 컴포넌트에 이 접두사가 붙어서 추가돼요.

{
  "tailwind": {
    "prefix": "tw-"
  }
}

rsc

React Server Components 지원 여부예요.

true로 설정하면 CLI가 클라이언트 컴포넌트에 자동으로 use client 지시문을 추가해요.

{
  "rsc": `true` | `false`
}

tsx

TypeScript 또는 JavaScript 컴포넌트 중에서 선택해요.

이 옵션을 false로 설정하면 컴포넌트가 .jsx 확장자로 JavaScript로 추가돼요.

{
  "tsx": `true` | `false`
}

aliases

CLI는 이 값들과 tsconfig.json 또는 jsconfig.json 파일의 paths 설정을 사용해 생성된 컴포넌트를 올바른 위치에 배치해요.

경로 별칭(path aliases)은 tsconfig.json 또는 jsconfig.json 파일에 설정되어 있어야 해요.

aliases.utils

유틸리티 함수의 import 별칭이에요.

{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

aliases.components

컴포넌트의 import 별칭이에요.

{
  "aliases": {
    "components": "@/components"
  }
}

aliases.ui

ui 컴포넌트의 import 별칭이에요.

CLI는 aliases.ui 값을 사용해 ui 컴포넌트를 어디에 배치할지 결정해요. ui 컴포넌트의 설치 디렉터리를 커스텀하고 싶다면 이 설정을 사용하세요.

{
  "aliases": {
    "ui": "@/app/ui"
  }
}

aliases.lib

format-date나 generate-id 같은 lib 함수의 import 별칭이에요.

{
  "aliases": {
    "lib": "@/lib"
  }
}

aliases.hooks

use-media-query나 use-toast 같은 hooks의 import 별칭이에요.

{
  "aliases": {
    "hooks": "@/hooks"
  }
}

더 알아보기 (Learn more)

• 설치 (Installation) — Tailwind CSS와 프로젝트를 설정하는 방법이에요.
• 테마링 (Theming) — CSS 변수와 유틸리티 클래스 기반 테마링이에요.
• CLI — shadcn CLI 사용 방법이에요.