Install daisyUI for Deno Fresh - Fresh

daisyUI is a component library for Tailwind CSS that provides semantic class names for common UI components like buttons, cards, and modals. It makes building beautiful interfaces faster while maintaining full Tailwind CSS compatibility.

Installation

To get started with daisyUI, make sure you have Tailwind CSS enabled in your Fresh project, then install daisyUI and update your configuration.

Run deno i -D npm:daisyui@latest to install daisyUI
Add daisyUI configuration in ./assets/styles.css:
diff
```
  @import "tailwindcss";
+ @plugin "daisyui";
```

Now you're ready to use daisyUI.

Using daisyUI Components

Create a button component in the components directory, using daisyUI's style classes for reference.

tsx

import type { ComponentChildren } from "preact";

export interface ButtonProps {
  id?: string;
  onClick?: () => void;
  children?: ComponentChildren;
  disabled?: boolean;
}

export function Button(props: ButtonProps) {
  return (
    <button
      className="btn btn-dash btn-primary"
      {...props}
    />
  );
}

Display Effect

daisyUI Class Name Reference

For more components and usage, please refer to the daisyUI official documentation