공식 daisyUI 5.7.47 클래스를 Tailwind CSS 4.3.3으로 컴파일했으며, 애플리케이션 동작은 기본 JavaScript으로 구현했습니다. · 구현 레퍼런스
02
daisyUI 디자인 시스템 디자인 참고 자료
Tailwind CSS 4.3.3으로 빌드한 daisyUI 5.7.47입니다. 나열된 색상 및 기하 값은 번들에 포함된 Emerald 테마의 값이며, Lo-fi와 Night에는 의도적으로 다른 값이 지정되어 있습니다. 페이지의 타이포그래피와 간격은 Tailwind 호환 치수를 사용한 독자적인 설정입니다.
daisyUI는 Tailwind 플러그인을 통해 컴포넌트 클래스를 제공합니다. 버전 5에서는 CSS에서 설정합니다. tailwindcss를 가져온 다음 daisyui 플러그인과 사용할 테마를 선언합니다. 이 예제는 컴포넌트의 모양을 사용자 정의 선택자로 다시 구현하는 대신 btn, card, fieldset, range, checkbox, join, modal을 사용합니다.
플러그인은 애플리케이션의 상태 관리를 제공하지 않습니다. 네이티브 입력 요소, 브라우저 유효성 검사, 다이얼로그 메서드, 그리고 소규모 JavaScript 모듈이 이 초대장 제작 도구의 인터랙션을 구현합니다. 라이브러리를 선택할 때 이 차이를 고려해야 합니다. 컴포넌트 계층이 CSS이므로 여러 프레임워크와 함께 사용할 수 있지만, 클래스 이름만으로 서버 작업이 구현되는 것은 아닙니다.
초대장 카드에서는 bg-primary와 text-primary-content를 함께 사용합니다. 역할 표시 영역에서도 secondary, accent, neutral을 같은 방식으로 짝지어 사용합니다. 이는 모든 컴포넌트에 복사해야 하는 단일 고정 팔레트가 아니라 서로 조화를 이루는 시맨틱 역할입니다. 다른 활성화된 테마를 선택하면 카드 마크업은 그대로 두고 기본 변수를 바꿀 수 있습니다.
Emerald의 primary는 밝은 녹색이고 primary-content는 짙은 녹색입니다. 모든 primary 배경에 흰색 텍스트를 자동으로 사용하면 테마가 의도한 콘텐츠 역할을 무시하게 됩니다. 사양 표에는 설치된 Emerald 테마의 실제 OKLCH 값이 그대로 표시되어 있으며, 추측한 16진수 브랜드 색상으로 변환하지 않았습니다.
CSS 플러그인 설정에서는 Emerald를 기본 테마로, Lo-fi와 Night를 추가 테마로 활성화합니다. 선택 컨트롤은 문서 요소의 data-theme 값을 변경합니다. 메뉴에는 컴파일된 테마만 표시됩니다. 빌드하지 않은 테마 이름을 선택해도 해당 CSS가 새로 만들어지지는 않습니다.
테마에는 반경, 필드 크기, 테두리, 효과를 제어하는 변수도 포함됩니다. 따라서 Emerald에서 Lo-fi로 전환하면 색상 견본뿐만 아니라 다른 요소도 바뀝니다. 임베드된 영역에만 테마를 적용하려면 html 대신 해당 영역에 data-theme을 지정하면 됩니다. 이 독립 실행형 예제에서는 의도적으로 문서 전체에 테마를 적용합니다.
Emerald에서는 radius-selector가 1rem, radius-field가 0.5rem, radius-box가 1rem으로 정의됩니다. size-selector와 size-field는 컴포넌트 계산에 사용되는 0.25rem 단위의 기본 크기입니다. 이 값은 페이지 섹션 사이의 간격과 서로 바꿔 쓸 수 없습니다. 사양에서는 컴포넌트의 형태와 원래 작업 화면의 레이아웃을 구분합니다.
페이지 바깥 영역에는 시스템 산세리프 글꼴 스택, 큰 편집 스타일 제목, 2열 구성이 적용됩니다. daisyUI에서 이러한 제목 위계를 요구하는 것은 아닙니다. 원래의 700px 중단점에서는 페이지가 편집 영역을 초대장 위에 배치하는 세로 구성으로 바뀝니다. 화면에 맞추기 위해 입력 항목이나 작업을 숨기지 않습니다.
형식 옵션은 name을 공유하며 join-item과 btn 클래스를 사용하는 라디오 입력 요소입니다. Studio session 또는 Online circle을 선택하면 네이티브 선택 상태와 미리 보기 문구가 바뀝니다. 선택 상태가 유지되지 않는 스타일 버튼 행만으로는 이 상호 배타적 선택을 명확하게 표현할 수 없습니다.
좌석 수에는 최소 4, 최대 24, 간격 2인 네이티브 range 입력 요소를 사용합니다. output 요소는 현재 숫자를 표시하고, 양 끝의 라벨은 의도한 모임 규모를 설명합니다. 준비물 컨트롤은 실제 checkbox입니다. 상태가 바뀌면 checkbox 색상만 바뀌는 것이 아니라 초대장 바닥글도 달라집니다.
제목 입력은 필수이며 최소 및 최대 글자 수 제약이 적용됩니다. validator 클래스와 validator-hint는 유효하지 않은 상태를 표시하고, 네이티브 제약 조건은 브라우저가 적용합니다. 검토 버튼의 일반적인 클릭 핸들러로 유효성 검사를 우회하지 않습니다.
일반 유효성 검사를 통과한 뒤 제출 핸들러가 제목의 앞뒤 공백을 제거하고 실제 글자 수를 확인합니다. 이렇게 하면 공백을 제거하지 않은 minlength 검사에서는 통과할 수 있는 공백 문자열도 걸러낼 수 있습니다. 제목을 수정하면 다음 input 이벤트에서 사용자 지정 유효성 메시지가 지워져 다시 제출할 수 있습니다. 사용자 입력은 textContent로 렌더링하며, HTML로 삽입하지 않습니다.
초대장 검토를 선택하면 현재 제목, 형식, 좌석 수, 준비물을 스냅샷에 복사한 다음 dialog.showModal을 호출합니다. modal 클래스는 daisyUI 스타일을 제공하고, 네이티브 다이얼로그 동작은 브라우저가 처리합니다. aria-labelledby가 다이얼로그의 제목을 지정하며, 저장하지 않고 Escape 키로 검토 화면을 닫을 수 있습니다.
편집 계속을 선택하면 다이얼로그가 닫히고 양식은 바뀌지 않습니다. 로컬 초안 저장을 선택하면 다이얼로그가 닫히고 상태 영역에 정확한 스냅샷을 알립니다. 초대장은 전송되지 않았다는 메시지도 표시합니다. 수신자 목록이나 전송 서비스가 없으므로 이메일이 전송된 것처럼 성공을 꾸며내지 않습니다.
필드를 변경하면 카드가 즉시 업데이트되고 이전 저장 알림은 숨겨집니다. 이렇게 하면 저장되지 않은 새 초대장에 오래된 성공 메시지가 잘못 표시되는 일을 막을 수 있습니다. 초기화는 브라우저가 양식의 기본값을 복원할 때까지 기다린 다음 실제 값으로 미리 보기를 다시 구성합니다. 별도로 선택한 테마는 유지됩니다.
세 가지 도형으로 이루어진 장식 아트워크는 primary-content에서 채우기 색을 가져오므로 테마가 바뀌면 타이포그래피와 함께 색도 바뀝니다. 좌석이나 형식에 관한 정보를 제공하지 않으므로 aria-hidden으로 표시합니다. 의미 있는 콘텐츠는 화면에 보이는 미리보기 제목과 바닥글에 담깁니다.
제공된 설정은 Tailwind CLI, 로컬 input.css, 위에 표시된 세 개의 소스 파일을 사용합니다. source(none)은 광범위한 자동 검색을 비활성화하며 명시적 source 지시문은 컴포넌트와 유틸리티 클래스가 포함된 HTML을 지정합니다. 따라서 예제에서 생성되는 CSS은 실제 마크업에 따라 달라집니다.
빌드 결과를 원본 레이아웃 스타일시트와 결합하며, 일반 JavaScript은 상호작용을 처리합니다. 독립 실행형 미리보기는 결과를 인라인으로 포함하므로 원격 종속성이 없습니다. Vite, Astro 또는 React 프로젝트에서는 일반적인 Tailwind 통합을 사용할 수 있지만, 활성화된 테마 목록을 유지하고 클래스가 포함된 소스 파일이 빌드에 포함되도록 해야 합니다.
대화상자는 시각적으로만 표시하는 open 클래스가 아니라 showModal을 통해 엽니다.
로컬 초안 동작
실시간 미리보기, 변경되지 않는 검토 스냅샷, 테마 선택 및 네이티브 유효성 검사.
자바스크립트
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
daisyUI 5.7.47 및 Tailwind CSS 4.3.3으로 검증했습니다. 카드 아트워크와 페이지 레이아웃은 독자적으로 제작했으며, 컴포넌트 CSS 및 Emerald 테마 값은 기본 제공 항목입니다.
CSS
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
프로젝트를 위한 프롬프트
에이전트 프롬프트
제공된 Tailwind 4 빌드와 Emerald, Lo-fi, Night 테마를 사용해 daisyUI 5.7.47로 초대장 스튜디오를 재현하세요. 시맨틱 표면 색상과 그에 대응하는 콘텐츠 역할을 짝지으세요. 연결된 네이티브 라디오 입력, 짝수 단계로 조정되는 좌석 범위 입력, 자료 체크박스 및 제목 유효성 검사를 유지하세요. 검토를 누르면 현재 초대장이 네이티브 대화상자에 표시됩니다. 로컬 초안 저장은 해당 스냅샷을 확인하며, 이후 수정하면 메시지가 지워집니다. 선택한 테마와 별개로 양식을 초기화하고 초대장이 전송되었다고 안내하지 마세요.
05
daisyUI 디자인 시스템 출처 및 범위
daisyUI 5.7.47 및 Tailwind CSS 4.3.3. Emerald 값은 테마 전용입니다. 로컬 초안은 데이터를 저장하거나 초대장을 전송하지 않습니다.
