papopporking-oss/opencode-nextjs-standard

Regras de uso do daisyUI 5

1. Para estilizar um elemento HTML, adicione os nomes de classe do daisyUI a ele. Adicione o nome da classe do componente necessário. Adicione também as classes de parte e modificador aplicáveis.
2. Se as classes atuais do daisyUI não conseguirem fazer uma alteração necessária, use classes utilitárias do Tailwind CSS. Por exemplo, btn px-10 define um padding horizontal personalizado em um btn.
3. Se a especificidade do CSS impedir uma alteração em um estilo do daisyUI, adicione ! ao final da utilidade do Tailwind. Por exemplo, btn bg-red-500! sobrescreve a cor de fundo de um btn. Use este método somente se outros métodos não funcionarem. Não o use com frequência.
4. Se o daisyUI não tiver um componente aplicável, crie um componente com utilitários do Tailwind CSS.
5. Ao usar flex ou grid do Tailwind CSS para um layout, adicione prefixos de utilitários responsivos.
6. Use apenas nomes de classe atuais do daisyUI ou classes utilitárias do Tailwind CSS.
7. Se o CSS customizado não for necessário, não o escreva. Se possível, use nomes de classe do daisyUI ou classes utilitárias do Tailwind CSS.
8. Se precisar de imagens placeholder, use https://picsum.photos/200/300 com as dimensões necessárias.
9. Se uma fonte personalizada não for necessária, não adicione uma.
10. Se bg-base-100 text-base-content não for necessário, não o adicione ao body.
11. Para decisões de design, use os métodos do livro Refactoring UI.
12. Se o usuário não solicitar uma variante ou cor, use a variante padrão. Por exemplo, use btn para um botão. Se o usuário não solicitar essa variante, não use btn btn-primary.

Cada nome de classe do daisyUI 5 está em uma destas categorias. Estes nomes de categoria são apenas para referência. Não os use em código.

• component: A classe de componente necessária.
• part: Uma parte filha de um componente.
• style: Define um estilo específico em um componente ou parte.
• behavior: Altera o comportamento de um componente ou parte.
• color: Define uma cor específica em um componente ou parte.
• size: Define um tamanho específico em um componente ou parte.
• placement: Define uma posição específica para um componente ou parte.
• direction: Define uma direção específica para um componente ou parte.
• modifier: Altera o componente ou parte de uma forma específica.
• variant: Um prefixo para uma classe utilitária que aplica estilos em condições específicas. A sintaxe é variant:utility-class.

Alterar um componente em CSS

Use a diretiva @utility do Tailwind para alterar globalmente um componente do daisyUI:

@utility btn {
  @apply rounded-full;
}

Utilitários e variáveis do daisyUI

• Você pode usar cores semânticas com utilitários de cor do Tailwind e modificadores de opacidade. Exemplos: bg-primary, border-base-300 e text-base-content/60.
• rounded-box, rounded-field e rounded-selector usam os tokens de raio do tema ativo.
• glass aplica o efeito glass do daisyUI.
• Alguns componentes fornecem variáveis CSS para alterações específicas do componente. Countdown usa --value e --digits. Radial progress usa --size e --thickness.

Módulos base

daisyUI inclui os módulos base properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter e svg. Para excluir um módulo da configuração do plugin, use seu nome de módulo:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

Use include ou exclude para módulos de biblioteca. Para alterações visuais, use utilitários Tailwind ou @utility.