DaisyUI Theming

Every Chef uses Tailwind CSS v4 with DaisyUI for styling. All configuration happens in CSS - no separate tailwind.config.js file needed.

Basic Setup

The main CSS file (src/client/styles/app.css) configures everything:

@import "tailwindcss";
@plugin "daisyui" {
  exclude: properties;
}

@theme {
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

Custom Themes

DaisyUI themes are defined using the @plugin directive with OKLCH colors:

@plugin "daisyui/theme" {
  name: "chef";
  default: true;
  prefersdark: false;
  color-scheme: "light";

  /* Primary green for cooking/fresh theme */
  --color-primary: oklch(55% 0.15 145);
  --color-primary-content: oklch(98% 0.01 145);

  /* Warm orange secondary */
  --color-secondary: oklch(65% 0.12 45);
  --color-secondary-content: oklch(98% 0.01 45);

  /* Base colors */
  --color-base-100: oklch(98% 0.005 90);
  --color-base-200: oklch(95% 0.008 90);
  --color-base-300: oklch(90% 0.01 90);
  --color-base-content: oklch(25% 0.02 90);
}

You can define multiple themes (light, dark, etc.) and DaisyUI handles switching between them.

Reusable Component Classes

For consistent styling across the app, define reusable classes:

.chat-message-user {
  @apply bg-base-300 text-base-content rounded-2xl rounded-br-sm px-4 py-2;
}

.chat-message-assistant {
  @apply bg-base-200 text-base-content rounded-2xl rounded-bl-sm px-4 py-2;
}

.program-card {
  @apply bg-base-100 border border-base-300 rounded-xl p-5 transition-all;
}

PWA Safe Areas

For mobile PWA support, add utilities for safe area insets:

@layer utilities {
  .pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 0.5rem) + 0.5rem);
  }

  .pt-safe {
    padding-top: calc(env(safe-area-inset-top, 0.5rem) + 0.5rem);
  }
}

This ensures content doesn’t get hidden behind the notch or home indicator on mobile devices.