개요
풍부한 재사용 가능한 UI 컴포넌트와 사용자 정의 가능한 테마를 제공하는 무료 오픈 소스 Tailwind CSS 컴포넌트 라이브러리입니다. 가볍고 모든 웹 프로젝트에 쉽게 통합할 수 있습니다.
README 미리보기
\n\n[![][logo-url]][docs-url]\n\n**The most popular, free and open-source component library for Tailwind CSS**\n\n[![][version]](https://www.npmjs.com/package/daisyui)\n[![][commit]](https://github.com/saadeghi/daisyui)\n[![][license]](https://github.com/saadeghi/daisyui/blob/master/LICENSE)\n[![][stars]](https://github.com/saadeghi/daisyui)\n[![][installs]](https://www.npmjs.com/package/daisyui)\n[![][jsdelivr]](https://cdn.jsdelivr.net/npm/daisyui@5)\n[![][discord]](https://daisyui.com/discord/)\n[![][opencollectivebadge]](https://opencollective.com/daisyui)\n\n\n\n# daisyUI 5\n\n### 🌼 [Official website →](https://daisyui.com/)\n\n### 🧩 [See all components →](https://daisyui.com/components/)\n\n### 🚀 [How to use →](https://daisyui.com/docs/install/)\n\n### 🤝 [Contribute →](.github/CONTRIBUTING.md)\n\n---\n\n\n\nSponsors and backers\n\n[![][backers_org]][opencollective]\n[![][backers]][opencollective]\n\nContributors\n\n[![][contributors_img]][contributors]\n\n\n\n\n\n༼ つ ◕_◕ ༽つ Please share\n\n[![][tweet]](https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui)\n\n\n\n[version]: https://badgen.net/github/tag/saadeghi/daisyui?label=Version&color=1AD1A5\n[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?label=Last%20commit&color=1AD1A5\n[license]: https://badgen.net/github/license/saadeghi/daisyui?label=License&color=1AD1A5\n[stars]: https://badgen.net/github/stars/saadeghi/daisyui?label=GitHub%20stars&color=1AD1A5\n[installs]: https://badgen.net/npm/dt/daisyui?label=NPM%20installs&color=1AD1A5\n[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/daisyui?color=1AD1A5\n[discord]: https://badgen.net/discord/members/S6TZxycVHs?label=Discord&color=1AD1A5\n[opencollectivebadge]: https://badgen.net/opencollective/backers/daisyui?label=Open%20Collective&color=1AD1A5\n[tweet]: https://img.shields.io/twitter/url?label=Share&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui\n[docs-url
FAQ (5)
문제 해결daisyui_component_syntax_expert 또는 daisyui_creative_director에서 발생하는 MCP 오류 -32602 "Structured content does not match the tool's output schema"를 해결하려면 어떻게 해야 하나요?
daisyUI Blueprint MCP 서버를 v1.8.1에서 v1.8.2 이상으로 업그레이드하세요. 해당 버전에서는 스키마가 유효하지 않은(schema-invalid) 어드바이저리 도구 응답 문제가 수정되었습니다.
1. MCP 서버/클라이언트를 중지합니다.
2. 패키지를 업그레이드합니다. 예:
npm install daisyui-blueprint@1.8.2
3. MCP 클라이언트를 다시 시작합니다.
4. _meta.serverVersion이 1.8.2인지 확인합니다.
5. daisyui_component_syntax_expert 또는 daisyui_creative_director를 다시 실행합니다.
SnippetIDs를 변경하거나, 페이로드를 줄이거나, workflowId만 사용하는 방법으로는 이 문제를 우회할 수 없습니다. v1.8.1은 instructions, next step, workflow와 같은 필수 출력 필드를 누락하기 때문입니다.
문제 해결daisyui_quality_inspector가 renderedReview와 함께 다시 실행될 때 발생하는 daisyUI Blueprint MCP 'Structured content does not match the tool's output schema' 오류를 해결하는 방법
손상된 finalization 경로를 수정한 v1.6.3 이상으로 daisyUI Blueprint MCP 서버를 업그레이드하세요:
npm install daisyui-blueprint@1.6.3그런 다음 MCP 클라이언트/서버를 재시작하고 동일한 workflowId, files 및 완료된 renderedReview로 daisyui_quality_inspector를 다시 실행하세요. 레지스트리 전파 지연으로 인해 npm에서 v1.6.3이 즉시 표시되지 않는 경우, 잠시 기다렸다가 설치를 다시 시도하거나 npm cache clean --force로 npm 캐시를 지우세요.
영향을 받는 버전: v1.6.1. v1.6.1에서는 요청을 재시도해도 동일한 스키마 오류가 발생합니다. 임시 해결 방법으로, _meta.finalizationAllowed: true를 기다리는 대신 자동화된 검사 통과와 문서화된 수동 점검이 완료되면 감사가 완료된 것으로 간주하세요.
문제 해결DaisyUI Diff 컴포넌트가 Android용 Firefox에서 드래그되지 않는 이유는 무엇인가요?
Firefox for Android는 CSS resize 속성을 인식하지만 터치 기기에서는 이를 무시하므로(Mozilla bug 1776834) Diff 컴포넌트의 드래그 핸들을 움직일 수 없습니다. 이 문제는 iOS Safari에서 이미 사용 중인 것과 동일한 tap-to-expand 폴백을 추가하여 DaisyUI PR #4762에서 수정되었습니다. 이 수정 사항이 포함된 릴리스로 DaisyUI를 업데이트한 다음, Firefox Android에서 핸들을 드래그하는 대신 diff의 한쪽을 탭하여 해당 쪽을 확장하세요.
문제 해결input-primary를 사용하면 daisyUI validator에 error/success 색상이 표시되지 않는 이유는 무엇이며, 어떻게 해결할 수 있나요?
이것은 daisyUI 5.2.4–5.7.40에서 발생한 CSS 레이어 순서 회귀입니다. input-primary와 같은 색상 수정자가 validator 뒤에 생성되므로 :user-invalid 및 :user-valid 상태를 덮어씁니다. npm install daisyui@latest를 실행하여 패치된 최신 daisyUI 5.x 릴리스로 업그레이드한 다음 개발 서버를 재시작하거나 다시 빌드하세요. 이 수정은 validator 스타일을 수정자 레이어로 이동하여 색상 수정자보다 우선 적용되도록 합니다. 임시 해결 방법으로, 유효성 검사가 적용된 컨트롤에서 input-primary를 제거하거나 input에 대해 더 높은 우선순위의 오버라이드를 추가하세요: .input.validator:user-invalid { @apply border-error; } .input.validator:user-valid { @apply border-success; }.
문제 해결"with icon"이라는 제목의 daisyUI navbar 예제에 아이콘이 표시되지 않는 이유는 무엇인가요?
예제에서는 작은 내장 버튼 심볼을 "아이콘"이라는 용어로 지칭합니다: 시작 부분의 햄버거(☰)와 끝 부분의 세 점(⋮) 메뉴입니다. 이들을 알아차리지 못했다면 navbar 시작/끝 섹션을 확인하세요. 대신 일반적인 그래픽 아이콘을 표시하려면 해당 <button> 내부의 텍스트 심볼을 SVG 또는 아이콘 라이브러리의 아이콘으로 교체하세요.