Um estúdio de convites nativo de CSS que demonstra os temas semânticos 5 de daisyUI, cores pareadas para conteúdo, seleção por botões de opção, controles de intervalo, validação do navegador e uma etapa de revisão em um diálogo real.
Classes oficiais de daisyUI 5.7.47 compiladas com Tailwind CSS 4.3.3; o comportamento da aplicação é implementado com JavaScript puro. · Referência de implementação
02
Referência de design do sistema de design daisyUI
daisyUI 5.7.47, criado com Tailwind CSS 4.3.3. Os valores de cor e geometria listados pertencem ao tema Emerald incluído no pacote; Lo-fi e Night definem valores diferentes intencionalmente. A tipografia e o espaçamento da página são escolhas originais que usam dimensões compatíveis com Tailwind.
Classes semânticas de componentes do sistema de design daisyUI para Tailwind CSS
Classes semânticas de componentes do CSS para Tailwind
daisyUI fornece classes de componentes por meio de um plugin do Tailwind. Na versão cinco, a configuração fica em CSS: importe tailwindcss e, em seguida, declare o plugin daisyui e os temas habilitados. O exemplo usa btn, card, fieldset, range, checkbox, join e modal, em vez de recriar a aparência desses componentes com seletores personalizados.
O plugin não fornece o gerenciamento de estado da aplicação. As entradas nativas, a validação do navegador, os métodos de diálogo e o pequeno módulo de JavaScript tornam este estúdio de convites interativo. Essa distinção é importante na escolha da biblioteca: ela pode funcionar com várias estruturas porque sua camada de componentes é CSS, mas um nome de classe, por si só, não implementa uma operação no servidor.
No sistema de design daisyUI, associe cada superfície colorida ao papel de conteúdo correspondente
Associe cada superfície colorida ao papel de conteúdo correspondente
O cartão de convite usa bg-primary e text-primary-content em conjunto. A faixa de papéis repete essa associação para secondary, accent e neutral. Esses são papéis semânticos coordenados, não uma única paleta fixa que precisa ser copiada em todos os componentes. A seleção de outro tema habilitado altera as variáveis subjacentes sem modificar a marcação do cartão.
A cor primária do Emerald é verde-clara, e primary-content é verde-escura. Usar automaticamente texto branco em todo fundo primário ignoraria a função de conteúdo prevista pelo tema. A tabela de especificações preserva os valores OKLCH reais do tema Emerald instalado; não os converte em cores de marca hexadecimais presumidas.
Sistema de design daisyUI Compile os temas que pretende oferecer
Compile os temas que pretende oferecer
A configuração do plugin CSS habilita Emerald como padrão, além de Lo-fi e Night. Um controle de seleção altera data-theme no elemento do documento. O menu oferece apenas os temas compilados; selecionar um nome que nunca foi compilado não fará o CSS correspondente aparecer por mágica.
Os temas também incluem variáveis de raio, tamanho dos campos, borda e efeitos. Portanto, mudar de Emerald para Lo-fi altera mais do que uma amostra de cor. Para limitar um tema a uma região incorporada, data-theme pode ser aplicado a essa região em vez de a html. Este exemplo independente aplica o tema deliberadamente ao documento inteiro.
Compile os temas desejados no bloco do plugin daisyUI.
Use classes semânticas de fundo e conteúdo na marcação dos componentes.
Altere data-theme e inspecione controles, superfícies e texto em conjunto.
Sistema de design daisyUI Os raios de seletor, campo e caixa são distintos
Os raios dos seletores, campos e caixas são independentes
Emerald define radius-selector como um rem, radius-field como meio rem e radius-box como um rem. Seus valores size-selector e size-field são unidades-base de um quarto de rem usadas nos cálculos dos componentes. Esses valores não são intercambiáveis com o espaçamento entre seções da página. A especificação separa a geometria dos componentes do layout original da área de trabalho.
A página ao redor usa uma pilha de fontes sem serifa do sistema, um título editorial grande e uma composição em duas colunas. daisyUI não exige essa hierarquia de títulos. No ponto de interrupção original de 700px, a página empilha o editor acima do convite; preserva todas as entradas e ações, em vez de ocultar configurações para caber em uma captura de tela.
Sistema de design daisyUI Um grupo de opções usa entradas de rádio reais
Um grupo join reúne entradas de rádio reais
As opções de formato são entradas de rádio com um nome compartilhado e as classes join-item e btn. Selecionar Sessão em estúdio ou Encontro on-line altera o estado nativo de seleção e o texto da prévia. Uma linha de botões estilizados sem um estado de seleção persistente não representaria essa escolha mutuamente exclusiva com a mesma clareza.
O controle de lugares usa uma entrada nativa do tipo range, de quatro a vinte e quatro, em incrementos de dois. Um elemento output exibe o número atual, enquanto os rótulos nas extremidades indicam o tamanho pretendido do encontro. O controle de materiais é uma caixa de seleção real. Seu estado altera o rodapé do convite, em vez de apenas mudar a cor da caixa.
Sistema de design daisyUI A validação CSS respeita as restrições do navegador
CSS A validação respeita as restrições do navegador
O campo de título é obrigatório e tem limites mínimo e máximo de caracteres. As classes validator e validator-hint apresentam o estado inválido; ainda cabe ao navegador impor a restrição nativa. O formulário não contorna a validação com um manipulador de clique genérico no botão de revisão.
Depois que a validação padrão é aprovada, o manipulador de envio remove os espaços em branco do início e do fim do título e verifica seu comprimento significativo. Assim, detecta uma sequência de espaços que poderia satisfazer um minlength sem remoção de espaços. Uma mensagem de validade personalizada é apagada no próximo evento de entrada, permitindo o envio de um título corrigido. O conteúdo do usuário é exibido por meio de textContent, nunca inserido como HTML.
Sistema de design daisyUI Um diálogo real mantém uma cópia dos dados para revisão
Um diálogo real mantém uma cópia dos dados para revisão
A revisão do convite copia o título, o formato, o número de lugares e os materiais atuais para uma cópia dos dados e, em seguida, chama dialog.showModal. A classe modal fornece a estilização de daisyUI, enquanto o navegador oferece o comportamento nativo do diálogo. O título identifica o diálogo por meio de aria-labelledby, e a tecla Escape pode fechá-lo sem salvar.
Manter a edição fecha o diálogo e não altera o formulário. Salvar rascunho local fecha o diálogo e anuncia a cópia exata dos dados em uma região de status. A mensagem informa que nenhum convite foi enviado. Isso não simula deliberadamente um envio de e-mail bem-sucedido: o exemplo não tem lista de destinatários nem serviço de envio.
Sistema de design daisyUI A redefinição e a edição têm efeitos observáveis
A redefinição e a edição têm efeitos observáveis
Alterar um campo atualiza o cartão imediatamente e oculta um aviso de salvamento anterior. Isso impede que uma mensagem de sucesso desatualizada pareça se referir a um convite mais recente, ainda não salvo. A redefinição aguarda o navegador restaurar os valores padrão do formulário e, em seguida, recria a prévia com esses valores. O tema selecionado separadamente permanece inalterado.
O preenchimento da arte decorativa de três formas deriva de primary-content, então ela responde às mudanças de tema junto com a tipografia. A arte tem aria-hidden porque não acrescenta informações sobre o número de lugares nem o formato. O título e o rodapé visíveis da prévia contêm o conteúdo relevante.
Uma entrada inválida impede a revisão e identifica o campo de título.
A tecla Escape fecha a revisão sem gerar um resultado salvo.
Editar depois de salvar limpa o resultado anterior e mantém o tema atual.
Sistema de design daisyUI Uma pequena CSS compilação com descoberta explícita dos arquivos-fonte
Uma pequena implementação de CSS com descoberta explícita de fontes
A configuração fornecida usa a CLI do Tailwind, um arquivo input.css local e os três arquivos-fonte mostrados acima. source(none) desativa a varredura automática abrangente, e a diretiva source explícita aponta para HTML, que contém o componente e as classes utilitárias. Assim, o CSS gerado pelo exemplo depende da marcação usada de fato.
A saída da compilação é combinada com a folha de estilos do layout original; JavaScript simples trata das interações. A prévia independente incorpora o resultado e não depende de recursos remotos. Um projeto Vite, Astro ou React pode usar a integração padrão do Tailwind, mas deve manter a lista de temas habilitados e garantir a inclusão dos arquivos-fonte que contêm as classes.
Fundos primários sempre combinados com texto primary-content.
O controle range continua sendo uma entrada nativa com min, max e step.
A caixa de diálogo é aberta com showModal, não com uma classe open apenas visual.
Comportamento do rascunho local
Pré-visualização ao vivo, captura estável para revisão, seleção de tema e validação nativa.
javascript
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();
A área de visualização e o carregamento nativo de recursos estão incluídos.
04
Configuração do agente do sistema de design daisyUI
Ponto de partida para implementação
Verificado com daisyUI 5.7.47 e Tailwind CSS 4.3.3. A arte do cartão e o layout da página são originais; os valores do componente CSS e do tema Emerald são nativos.
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. */
Um prompt para seu projeto
Prompt para agente de IA
Use daisyUI 5.7.47 com a compilação Tailwind 4 fornecida e os temas Emerald, Lo-fi e Night para recriar o estúdio de convites. Combine as cores semânticas de superfície com as respectivas funções de conteúdo. Preserve os botões de opção nativos agrupados, o intervalo de assentos com incrementos regulares, a caixa de seleção de materiais e a validação do título. A revisão exibe o convite atual em uma caixa de diálogo nativa; Salvar rascunho local confirma essa captura, enquanto uma edição posterior limpa a mensagem. Redefina o formulário independentemente do tema selecionado e não afirme que os convites foram enviados.
05
Fontes e escopo do sistema de design daisyUI
daisyUI 5.7.47 e Tailwind CSS 4.3.3. Os valores Emerald são específicos do tema. O rascunho local não persiste dados nem envia convites.
