or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mdfeedback-components.mdform-components.mdindex.mdjavascript-utilities.mdlayout-components.mdnavigation-components.mdplugin-configuration.mdtheme-system.mdutility-classes.md
tile.json

plugin-configuration.mddocs/

Plugin Configuration

DaisyUI plugin configuration options for customizing behavior, theme selection, and component inclusion in your Tailwind CSS setup.

Capabilities

Basic Plugin Usage

Add DaisyUI to your Tailwind CSS configuration as a plugin.

/**
 * Default plugin usage with no configuration
 * Includes all components and utilities with default themes
 */
module.exports = {
  plugins: [require('daisyui')]
};

Plugin with Options

Configure DaisyUI behavior with options object.

/**
 * Plugin with configuration options
 * @param options - Plugin configuration object
 */
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ["light", "dark"],
    prefix: "ui-",
    logs: false,
    include: ["button", "card", "modal"],
    exclude: ["calendar"],
    root: ":root"
  }
};

Theme Configuration

Control which themes are included in your build.

/**
 * Theme configuration options
 */
interface ThemeOptions {
  // Include all 37 available themes
  themes: "all";
  
  // Or specify exact themes to include
  themes: string[];
  
  // Or use theme flags for special behavior
  themes: string[]; // e.g., ["light --default", "dark --prefersdark"]
}

Theme Flags:

  • --default: Set theme as the default theme
  • --prefersdark: Use theme for prefers-color-scheme: dark media query

Usage Examples:

// Include all themes
daisyui: {
  themes: "all"
}

// Specific themes only
daisyui: {
  themes: ["light", "dark", "cupcake", "synthwave"]
}

// With default and dark mode preference
daisyui: {
  themes: ["light --default", "dark --prefersdark", "cupcake"]
}

// Single theme as default
daisyui: {
  themes: ["corporate --default"]
}

Component Inclusion/Exclusion

Control which components and utilities are included in your build.

/**
 * Include only specific components
 * @param include - Array of component names to include
 */
daisyui: {
  include: ["button", "card", "modal", "input", "select"]
}

/**
 * Exclude specific components
 * @param exclude - Array of component names to exclude
 */
daisyui: {
  exclude: ["calendar", "timeline", "rating"]
}

Available Component Names:

[
  "alert", "avatar", "badge", "breadcrumbs", "button", "calendar", 
  "card", "carousel", "chat", "checkbox", "collapse", "countdown", 
  "diff", "divider", "dock", "drawer", "dropdown", "fab", 
  "fieldset", "fileinput", "filter", "footer", "hero", 
  "hovergallery", "indicator", "input", "kbd", "label", "link", 
  "list", "loading", "mask", "menu", "mockup", "modal", "navbar", 
  "progress", "radialprogress", "radio", "range", "rating", 
  "select", "skeleton", "stack", "stat", "status", "steps", 
  "swap", "tab", "table", "textarea", "timeline", "toast", 
  "toggle", "tooltip", "validator"
]

CSS Class Prefixing

Add a prefix to all DaisyUI component classes.

/**
 * Add prefix to component classes
 * @param prefix - String prefix for all classes
 */
daisyui: {
  prefix: "ui-"
}

With prefix "ui-", classes become:

  • btn → ui-btn
  • card → ui-card
  • modal → ui-modal

Console Logging

Control DaisyUI console output during build.

/**
 * Enable or disable console logging
 * @param logs - Boolean to control logging output
 */
daisyui: {
  logs: false  // Default: true
}

CSS Root Selector

Customize the root selector for theme CSS custom properties.

/**
 * Customize root selector for theme variables
 * @param root - CSS selector string for theme variables
 */
daisyui: {
  root: ":root"  // Default: ":root"
}

// Alternative root selectors
daisyui: {
  root: "html"
}

daisyui: {
  root: ".my-app"
}

Complete Configuration Example

/**
 * Complete Tailwind CSS configuration with DaisyUI
 */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // Your theme extensions
    },
  },
  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    themes: [
      "light",
      "dark", 
      "cupcake",
      {
        // Custom theme
        mytheme: {
          "primary": "#a991f7",
          "secondary": "#f6d860",
          "accent": "#37cdbe",
          "neutral": "#3d4451",
          "base-100": "#ffffff",
        },
      },
    ],
    prefix: "dui-",
    logs: true,
    include: [
      "button",
      "card", 
      "input",
      "modal",
      "navbar",
      "dropdown"
    ],
    exclude: ["calendar"],
    root: ":root"
  },
}

Types

interface PluginOptions {
  /**
   * Theme configuration - can be "all", array of theme names, or array with flags
   * @default ["light --default", "dark --prefersdark"]
   */
  themes?: "all" | string[];
  
  /**
   * CSS class prefix for all DaisyUI components
   * @default ""
   */
  prefix?: string;
  
  /**
   * Enable console logging during build
   * @default true
   */
  logs?: boolean;
  
  /**
   * Array of component names to include (excludes all others)
   * @default undefined (includes all)
   */
  include?: string[];
  
  /**
   * Array of component names to exclude
   * @default undefined (excludes none)
   */
  exclude?: string[];
  
  /**
   * CSS root selector for theme custom properties
   * @default ":root"
   */
  root?: string;
}

type ComponentName = 
  | "alert" | "avatar" | "badge" | "breadcrumbs" | "button" 
  | "calendar" | "card" | "carousel" | "chat" | "checkbox" 
  | "collapse" | "countdown" | "diff" | "divider" | "dock" 
  | "drawer" | "dropdown" | "fab" | "fieldset" | "fileinput" 
  | "filter" | "footer" | "hero" | "hovergallery" | "indicator" 
  | "input" | "kbd" | "label" | "link" | "list" | "loading" 
  | "mask" | "menu" | "mockup" | "modal" | "navbar" | "progress" 
  | "radialprogress" | "radio" | "range" | "rating" | "select" 
  | "skeleton" | "stack" | "stat" | "status" | "steps" | "swap" 
  | "tab" | "table" | "textarea" | "timeline" | "toast" 
  | "toggle" | "tooltip" | "validator";