tessl/npm-daisyui

The most popular, free and open-source component library for Tailwind CSS

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-daisyui
Author: tessl

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";

Install with Tessl CLI