daisyui-usage

Applies daisyUI 5 component classes and Tailwind CSS utilities to style HTML elements.

Updated Sep 13, 2026
One-click install
npx skills add https://github.com/Ocyss/srs-auth --skill daisyui-usage-ocyss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-usage
Source: https://github.com/Ocyss/srs-auth/tree/main/.agents/skills/daisyui/usage
Command: npx skills add https://github.com/Ocyss/srs-auth --skill daisyui-usage-ocyss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents incorrect or inconsistent use of daisyUI 5 components by enforcing mandatory styling rules when building HTML interfaces with Tailwind CSS. ## Core Features & Use Cases - Component Class Rules: Defines how to combine component, part, modifier, color, size, and placement class names correctly. - Customization Guidance: Explains when to use Tailwind utility classes, the ! override, and the @utility directive for global component customization. - Use Case: When building a responsive page with buttons, cards, and navbars, follow these rules to pick default daisyUI variants, apply responsive flex/grid layouts, and avoid unnecessary custom CSS. ## Quick Start Ask the AI to build a responsive daisyUI 5 card component 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 customize daisyUI components with Tailwind CSS?▼

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

How to override daisyUI styles globally in CSS?▼

Use Tailwind's `@utility` directive to customize a daisyUI component globally, for example `@utility btn { @apply rounded-full; }`. This applies the change to every instance of that component.

Should I use btn-primary or the default daisyUI button variant?▼

Use the default variant, just `btn`, unless a specific variant or color is explicitly requested. The rules require default daisyUI component variants unless the user asks otherwise.

Can I exclude daisyUI base modules from the plugin?▼

Yes, daisyUI includes base modules like rootscrollgutter and scrollbar that can be excluded by name in the plugin config, for example `@plugin "daisyui" { exclude: rootscrollgutter; }`. Use include or exclude for library modules only.

When should I write custom CSS instead of daisyUI classes?▼

Ideally never; daisyUI class names and Tailwind utilities are preferred. Only create a custom component with Tailwind utilities when no equivalent daisyUI component exists.