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

daisyui-usage

Applies daisyUI 5 class names and Tailwind CSS utilities to style HTML components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When building web interfaces with daisyUI 5, it is easy to misuse class names, over-apply color variants, or fall back to unnecessary custom CSS. This Skill enforces the correct usage rules for daisyUI 5 components so generated markup stays consistent, responsive, and maintainable. ## Core Features & Use Cases - Class Name Rules: Defines how to combine component, part, modifier, color, size, and placement class names correctly on HTML elements. - Customization Guidance: Explains when to use Tailwind CSS utility classes for customization and when the ! suffix is acceptable as a last resort for specificity conflicts. - Design Constraints: Enforces responsive layouts with Tailwind prefixes, default component variants, and minimal custom CSS. - Use Case: When asking an AI to build a landing page or dashboard with daisyUI 5, this Skill ensures the output uses valid class names like btn instead of inventing custom styles. ## Quick Start Build a responsive pricing page using daisyUI 5 components following the mandatory usage rules.

Frequently Asked Questions about daisyui-usage

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

FAQPage Schema
How do I style HTML elements with daisyUI 5?▼

Add daisyUI class names directly to HTML elements by combining the component class with any available part and modifier class names. For example, use `btn` for a button and add modifier classes only when a specific variant is requested.

How to customize daisyUI components with Tailwind CSS?▼

Apply Tailwind CSS utility classes alongside daisyUI classes, such as `btn px-10` for custom horizontal padding. If specificity issues prevent the override, append `!` to the utility class like `bg-red-500!` as a last resort.

Can I use custom CSS with daisyUI 5?▼

Custom CSS should be avoided when working with daisyUI 5. Only existing daisyUI class names and Tailwind CSS utility classes are allowed, and missing components should be composed from Tailwind utilities instead.

Why is my Tailwind utility class not overriding daisyUI styles?▼

CSS specificity conflicts can prevent Tailwind utilities from overriding daisyUI component styles. Append `!` to the utility class, for example `btn bg-red-500!`, to forcefully apply the style, but use this sparingly.

Should I use daisyUI color variants like btn-primary by default?▼

No, always use the default variant of daisyUI components unless a specific variant or color is requested. Prefer plain `btn` over `btn btn-primary` when no explicit styling requirement exists.

Related Skills

Explore More Design & Creative Skills→
pedroaalpedroaal

daisyui

Provide DaisyUI components for Tailwind CSS in frontend projects.

Community
Intermediate
abcnutsabcnuts
60

search-implementation

Set up hosted search backends and frontend components with typo tolerance.

Community
Intermediate
mayervcmayervc

movie-app-design

Standardize Movie App UI with Tailwind CSS and Framer Motion.

Community
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced