skills.rest
eminboydak
eminboydakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui-config

Configure daisyUI 5 themes, prefixes, and plugin options in Tailwind CSS.

Updated Sep 3, 2024
Search Tags:#frontend#styling#tailwind css#dark mode#daisyui#theme configuration#css plugin
One-click install
npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-config-eminboydak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-config
Source: https://github.com/eminboydak/duckTerm/tree/main/.agents/skills/daisyui/config
Command: npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-config-eminboydak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up daisyUI 5 correctly requires knowing the exact plugin configuration syntax for themes, prefixes, and exclusions, and misconfiguration leads to missing styles or unwanted default themes. ## Core Features & Use Cases - Theme Configuration: Enable specific built-in themes and designate default and prefers-dark themes using the @plugin directive. - Class Prefixing and Exclusions: Apply a custom prefix to all daisyUI classes and exclude components like rootscrollgutter or checkbox. - Use Case: When building a Svelte or Tailwind CSS v4 app with daisyUI 5, use this Skill to generate a configuration that enables all 32 built-in themes with bumblebee as default and synthwave as the dark mode theme. ## Quick Start Configure daisyUI 5 in my Tailwind CSS file to enable the light and dark themes with dark as the prefers-dark default.

Frequently Asked Questions about daisyui-config

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure daisyUI 5 themes in Tailwind CSS?▼

Configure daisyUI 5 themes inside the @plugin "daisyui" block in your CSS file using the themes key. List theme names and mark one with --default and another with --prefersdark for automatic dark mode.

How to set a default dark theme in daisyUI 5?▼

Set a default dark theme by appending --prefersdark to a theme name in the themes list, such as synthwave --prefersdark. That theme activates automatically when the user's system prefers dark mode.

Does daisyUI 5 support class prefixing?▼

Yes, daisyUI 5 supports class prefixing through the prefix option in the plugin configuration. Setting prefix: daisy- renames all daisyUI classes to start with daisy-, avoiding conflicts with other libraries.

How do I switch themes in daisyUI 5 at runtime?▼

Switch themes by adding data-theme="THEME_NAME" to the html element. The theme must first be enabled in the themes list of your daisyUI plugin configuration.

Can I exclude specific daisyUI components from the build?▼

Yes, use the exclude option in the plugin configuration to omit specific parts, such as exclude: rootscrollgutter, checkbox. The include option works similarly for explicitly selecting what to keep.

Related Skills

Explore More Software Engineering Skills→
IgorAIvanovIgorAIvanov
1

daisyui-install

Guides installation of daisyUI 5 with Tailwind CSS 4 in CSS files.

Community
Basic
aster-voidaster-void

daisyui

Apply DaisyUI semantic components and themes within Tailwind projects.

Community
Basic
wikimediawikimedia
7

protowiki-theme

Resolve ProtoWiki global theming into a data-theme attribute at boot.

Official
Intermediate
MadAppGangMadAppGang
7

tailwindcss

Configures Tailwind CSS v4 projects in Vite using CSS-first directives like @theme and @utility.

Official
Intermediate