papopporking-oss/opencode-nextjs-standard

daisyUI 5 사용 규칙

1. HTML 요소에 스타일을 적용하려면 daisyUI 클래스명을 추가하세요. 필요한 컴포넌트 클래스명을 추가하고, 적용 가능한 부분 및 수식어 클래스명도 함께 추가하세요.
2. 현재 daisyUI 클래스로 필요한 변경이 불가능한 경우 Tailwind CSS 유틸리티 클래스를 사용하세요. 예를 들어, btn px-10는 btn에 사용자 정의 수평 패딩을 설정합니다.
3. CSS 특이성(specificity) 때문에 daisyUI 스타일 변경이 불가능한 경우 Tailwind 유틸리티 끝에 !를 추가하세요. 예를 들어, btn bg-red-500!는 btn의 배경색을 덮어씁니다. 이 방법은 다른 방법이 작동하지 않을 때만 사용하고 자주 사용하지 마세요.
4. daisyUI에 적용 가능한 컴포넌트가 없는 경우 Tailwind CSS 유틸리티로 컴포넌트를 만드세요.
5. 레이아웃에 Tailwind CSS flex 또는 grid를 사용할 때는 반응형 유틸리티 접두사를 추가하세요.
6. 현재 daisyUI 클래스명이나 Tailwind CSS 유틸리티 클래스만 사용하세요.
7. 사용자 정의 CSS가 필요하지 않으면 작성하지 마세요. 가능하면 daisyUI 클래스명이나 Tailwind CSS 유틸리티 클래스를 사용하세요.
8. 플레이스홀더 이미지가 필요한 경우 https://picsum.photos/200/300을 필요한 크기와 함께 사용하세요.
9. 사용자 정의 폰트가 필요하지 않으면 추가하지 마세요.
10. bg-base-100 text-base-content가 필요하지 않으면 body에 추가하지 마세요.
11. 디자인 결정에는 Refactoring UI 책의 방법을 사용하세요.
12. 사용자가 변형(variant)이나 색상을 요청하지 않으면 기본 변형을 사용하세요. 예를 들어, 버튼에는 btn을 사용하세요. 사용자가 해당 변형을 요청하지 않았다면 btn btn-primary를 사용하지 마세요.

각 daisyUI 5 클래스명은 다음 범주 중 하나에 속합니다. 이 범주명은 참고용이며 코드에는 사용하지 마세요.

• component: 필수 컴포넌트 클래스.
• part: 컴포넌트의 자식 부분.
• style: 컴포넌트 또는 부분에 지정된 스타일을 설정합니다.
• behavior: 컴포넌트 또는 부분의 동작을 변경합니다.
• color: 컴포넌트 또는 부분에 지정된 색상을 설정합니다.
• size: 컴포넌트 또는 부분에 지정된 크기를 설정합니다.
• placement: 컴포넌트 또는 부분에 지정된 위치를 설정합니다.
• direction: 컴포넌트 또는 부분에 지정된 방향을 설정합니다.
• modifier: 컴포넌트 또는 부분을 지정된 방식으로 변경합니다.
• variant: 지정된 조건에서 스타일을 적용하는 유틸리티 클래스의 접두사입니다. 문법은 variant:utility-class입니다.

CSS에서 컴포넌트 변경하기

Tailwind @utility 지시문을 사용하여 daisyUI 컴포넌트를 전역적으로 변경할 수 있습니다:

@utility btn {
  @apply rounded-full;
}

daisyUI 유틸리티 및 변수

• Tailwind 색상 유틸리티와 불투명도 수식어와 함께 의미론적 색상을 사용할 수 있습니다. 예: bg-primary, border-base-300, text-base-content/60.
• rounded-box, rounded-field, rounded-selector는 활성 테마의 반경 토큰을 사용합니다.
• glass는 daisyUI 글래스 효과를 적용합니다.
• 일부 컴포넌트는 컴포넌트별 변경을 위한 CSS 변수를 제공합니다. Countdown은 --value와 --digits를 사용합니다. Radial progress는 --size와 --thickness를 사용합니다.

기본 모듈

daisyUI는 properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter, svg 기본 모듈을 포함합니다. 플러그인 설정에서 모듈을 제외하려면 모듈 이름을 사용하세요:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

라이브러리 모듈에는 include 또는 exclude를 사용하세요. 시각적 변경에는 Tailwind 유틸리티나 @utility를 사용하세요.