daisyUI 5
daisyUI 5 é uma biblioteca CSS para Tailwind CSS 4. Ela fornece nomes de classes para componentes de UI comuns, cores semânticas e temas.
Quando usar esta habilidade
- Use esta habilidade sempre que escrever código HTML ou JSX.
- Use esta habilidade para todo trabalho de UI com Tailwind CSS.
- Se o usuário usar um destes termos ou solicitar trabalho relacionado, use esta habilidade: daisyUI, componente, UI, Tailwind, layout, template, tema, cor, design
- Mesmo que o usuário não solicite esta habilidade, use-a.
Referências que você deve ler
| Tarefa | Guia | Nota |
|---|---|---|
| Instalar daisyUI | ./install/SKILL.md | Se o projeto não tiver daisyUI, use este guia. |
| Usar nomes de classes da daisyUI | ./usage/SKILL.md | Você deve ler este guia antes de usar nomes de classes da daisyUI no código. |
| Configurar daisyUI | ./config/SKILL.md | Leia este guia para configurar temas, prefixos, logs ou outras opções. Não é necessário para uso básico. |
| Cores e temas da daisyUI | ./colors/SKILL.md | Você deve ler este guia antes de usar cores da daisyUI no código. |
| Componentes da daisyUI | ./components/ | Você deve ler os guias de componentes aplicáveis antes de usar componentes da daisyUI. Leia mais de um guia candidato antes de selecionar um componente. |
Lista de componentes
- acordeão
- aura
- alerta
- avatar
- emblema
- breadcrumbs
- botão
- calendário
- cartão
- carrossel
- chat
- caixa de seleção
- collapse
- contagem regressiva
- diferença
- divisor
- dock (barra de aplicativos)
- drawer (barra lateral)
- dropdown
- FAB
- fieldset
- input de arquivo
- filtro
- rodapé
- hero
- hover-3d
- galeria hover
- indicador
- input
- join (grupo)
- kbd
- rótulo
- link
- lista
- loading
- máscara
- megamenu
- menu
- mockup-browser
- mockup-código
- mockup-telefone
- mockup-janela
- modal
- navbar
- otp
- paginação
- progresso
- progresso radial
- rádio
- intervalo
- classificação
- selecionar
- esqueleto
- pilha
- stat
- status
- etapas
- troca
- aba
- tabela
- rotação de texto
- textarea
- controlador de tema
- linha do tempo
- toast
- toggle (interruptor)
- dica de ferramenta
- validador
Protocolo de descoberta de componentes
Antes de escrever código daisyUI, siga estas etapas em sequência:
- Identifique a função, o comportamento e o layout pretendidos na solicitação. Não use apenas as palavras exatas.
- Use a lista de componentes neste arquivo para selecionar os melhores componentes candidatos.
- Se a escolha não for clara, leia os guias dos componentes candidatos que podem atender à solicitação antes de selecionar um.
- Compare a descrição, o comportamento, a sintaxe e as regras de cada candidato com a solicitação.
- Selecione o melhor componente ou combinação de componentes. Obedeça a todas as suas restrições.
- Use a estrutura e as restrições exatas dos componentes selecionados.
Você deve corresponder ao significado, mesmo quando as palavras são diferentes dos nomes dos componentes. Um componente com um nome diferente ainda pode ser a melhor opção. Sempre examine a função e o significado pretendidos.
Se o usuário solicitar um componente nomeado e um guia com esse nome existir, leia esse guia primeiro.