skills.rest
IgorAIvanov
IgorAIvanovCOMMUNITY
Explore all skills by this author →
GitHub

daisyui

Generates HTML and JSX UI code using daisyUI 5 component classes with Tailwind CSS 4.

1|Updated Jun 25, 2026
Search Tags:#theming#html generation#frontend#tailwind css#ui components#daisyui#css library
One-click install
npx skills add https://github.com/IgorAIvanov/altera03 --skill daisyui-igoraivanov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui
Source: https://github.com/IgorAIvanov/altera03/tree/main/skills/src/daisyui
Command: npx skills add https://github.com/IgorAIvanov/altera03 --skill daisyui-igoraivanov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires daisyui, tailwindcss, and includes references (resource) components.

What problem does it solve? Building consistent, themeable UI components with Tailwind CSS requires memorizing dozens of utility classes and reinventing common patterns like modals, drawers, and dropdowns. This Skill provides the official daisyUI 5 component class names, syntax, and rules so generated HTML/JSX uses correct, semantic, theme-aware markup. ## Core Features & Use Cases - Component Reference: Covers 60+ daisyUI components (button, card, modal, drawer, navbar, table, form inputs, etc.) with exact class names, syntax templates, and usage rules. - Theming & Colors: Enforces semantic color usage (primary, base-100, content colors) and supports custom theme generation via CSS variables. - Installation & Configuration: Guides Tailwind CSS 4 + daisyUI 5 setup, plugin config options, prefixes, and theme selection. - Use Case: Ask for a responsive landing page with a navbar, hero, pricing cards, and a modal, and receive markup using correct daisyUI classes that automatically adapt to light and dark themes. ## Quick Start Generate a responsive pricing page with a navbar, three cards, and a signup modal using daisyUI components.

Frequently Asked Questions about daisyui

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

FAQPage Schema
How do I install daisyUI 5 with Tailwind CSS 4?▼

Install daisyUI 5 by running npm i -D daisyui@latest, then add @plugin "daisyui"; to your CSS file after @import "tailwindcss";. Tailwind CSS v4 does not use tailwind.config.js, and a CDN option is also available for quick prototypes.

How do I use daisyUI component class names in HTML?▼

Add the component class (like btn or card) to an HTML element, then optionally add part, style, color, size, or modifier classes. Customization beyond daisyUI classes is done with Tailwind utility classes, using the ! suffix only as a last resort for specificity issues.

Does daisyUI support dark mode and custom themes?▼

Yes, daisyUI includes built-in themes like light, dark, cupcake, and synthwave, switchable via data-theme attributes or theme-controller inputs. Custom themes are defined with @plugin "daisyui/theme" and CSS variables for colors, radius, and sizes.

Should I use daisyUI color names or Tailwind colors like red-500?▼

Prefer daisyUI semantic color names like primary, base-100, or error because they adapt automatically to the active theme. Tailwind colors like red-500 stay fixed across themes and can cause unreadable contrast, so reserve them for theme-independent content like charts or brand icons.

What components are included in daisyUI 5?▼

daisyUI 5 includes over 60 components covering buttons, cards, modals, drawers, navbars, dropdowns, tabs, tables, form inputs, toggles, tooltips, timelines, and more. Each component has documented class names, syntax templates, and usage rules.

Related Skills

Explore More Software Engineering Skills→
pedroaalpedroaal

daisyui

Provide DaisyUI components for Tailwind CSS in frontend projects.

Community
Intermediate
cchrisvcchrisv

frontend-design

Generate polished React and HTML/CSS frontend interfaces with strong design aesthetics.

Community
Advanced
ngochuy13ngochuy13

design-reviewer

Review UI/UX design artifacts for WCAG 2.1 AA accessibility and design-system adherence.

Community
Intermediate
rayriffyrayriffy
127

daisyui

Provide semantic class names and Tailwind CSS components with themes.

Community
Advanced