papopporking-oss/opencode-nextjs-standard

Reglas de uso de daisyUI 5

1. Para estilizar un elemento HTML, agrégale nombres de clase de daisyUI. Añade el nombre de clase del componente necesario. También agrega los nombres de clase de la parte y del modificador correspondientes.
2. Si las clases actuales de daisyUI no permiten realizar un cambio necesario, usa clases de utilidad de Tailwind CSS. Por ejemplo, btn px-10 establece un padding horizontal personalizado en un btn.
3. Si la especificidad de CSS impide un cambio en un estilo de daisyUI, añade ! al final de la utilidad de Tailwind. Por ejemplo, btn bg-red-500! anula el color de fondo de un btn. Usa este método solo si otros métodos no funcionan. No lo uses con frecuencia.
4. Si daisyUI no tiene un componente aplicable, crea un componente con utilidades de Tailwind CSS.
5. Cuando uses flex o grid de Tailwind CSS para un diseño, agrega prefijos de utilidad responsivos.
6. Usa únicamente nombres de clase actuales de daisyUI o clases de utilidad de Tailwind CSS.
7. Si no es necesario CSS personalizado, no lo escribas. Si es posible, usa nombres de clase de daisyUI o clases de utilidad de Tailwind CSS.
8. Si necesitas imágenes de placeholder, usa https://picsum.photos/200/300 con las dimensiones necesarias.
9. Si no es necesaria una fuente personalizada, no agregues una.
10. Si bg-base-100 text-base-content no es necesario, no lo agregues al body.
11. Para decisiones de diseño, usa los métodos del libro Refactoring UI.
12. Si el usuario no solicita una variante o color, usa la variante predeterminada. Por ejemplo, usa btn para un botón. Si el usuario no solicita esa variante, no uses btn btn-primary.

Cada nombre de clase de daisyUI 5 pertenece a una de estas categorías. Estos nombres de categoría son solo de referencia. No los uses en código.

• component: La clase de componente necesaria.
• part: Una parte hija de un componente.
• style: Establece un estilo específico en un componente o parte.
• behavior: Cambia el comportamiento de un componente o parte.
• color: Establece un color específico en un componente o parte.
• size: Establece un tamaño específico en un componente o parte.
• placement: Establece una posición específica para un componente o parte.
• direction: Establece una dirección específica para un componente o parte.
• modifier: Cambia el componente o parte de una manera específica.
• variant: Un prefijo para una clase de utilidad que aplica estilos en condiciones específicas. La sintaxis es variant:utility-class.

Cambiar un componente en CSS

Usa la directiva @utility de Tailwind para cambiar un componente de daisyUI globalmente:

@utility btn {
  @apply rounded-full;
}

Utilidades y variables de daisyUI

• Puedes usar colores semánticos con utilidades de color de Tailwind y modificadores de opacidad. Ejemplos: bg-primary, border-base-300 y text-base-content/60.
• rounded-box, rounded-field y rounded-selector usan los tokens de radio del tema activo.
• glass aplica el efecto de vidrio de daisyUI.
• Algunos componentes proporcionan variables CSS para cambios específicos del componente. Countdown usa --value y --digits. Radial progress usa --size y --thickness.

Módulos base

daisyUI incluye los módulos base properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter y svg. Para excluir un módulo de la configuración del plugin, usa su nombre de módulo:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

Usa include o exclude para módulos de librería. Para cambios visuales, usa utilidades de Tailwind o @utility.