skills.rest
renjianguo666
renjianguo666COMMUNITY
Explore all skills by this author →
GitHub

daisyui

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

Updated Aug 17, 2026
Search Tags:#theming#html generation#frontend#css#tailwind css#ui components#daisyui
One-click install
npx skills add https://github.com/renjianguo666/litecms --skill daisyui-renjianguo666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui
Source: https://github.com/renjianguo666/litecms/tree/main/.agents/skills/daisyui
Command: npx skills add https://github.com/renjianguo666/litecms --skill daisyui-renjianguo666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires daisyui, tailwindcss.

What problem does it solve? Building consistent, themeable user interfaces with Tailwind CSS requires memorizing dozens of utility classes and component patterns. This Skill provides the complete daisyUI 5 component reference, class name rules, semantic color system, and theming configuration so generated HTML or JSX follows correct daisyUI conventions every time. ## Core Features & Use Cases - Component Code Generation: Produces markup for daisyUI components such as buttons, cards, modals, drawers, dropdowns, navbars, and forms using correct class names, parts, and modifiers. - Semantic Theming: Applies daisyUI semantic color names (primary, base-100, etc.) and configures built-in or custom themes via the @plugin "daisyui" CSS config. - Component Discovery Protocol: Matches user intent to the best component by comparing multiple candidates before writing code. - Use Case: Ask for a responsive landing page with a navbar, hero section, and pricing cards, and receive complete HTML using daisyUI classes that automatically adapt to light and dark themes. ## Quick Start Ask the AI to build a responsive pricing page with a navbar and cards using daisyUI and Tailwind CSS.

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 @import "tailwindcss"; and @plugin "daisyui"; to your CSS file. Tailwind CSS 4 no longer uses tailwind.config.js, so all configuration happens in CSS.

How do I create a custom daisyUI theme?▼

Define a custom theme using the @plugin "daisyui/theme" block in CSS with a name and all required CSS variables such as --color-primary and --color-base-100. Colors can be OKLCH or hex, and you can set the theme as default or prefersdark.

Can I use daisyUI from a CDN without npm?▼

Yes, daisyUI works from a CDN by including the daisyUI 5 stylesheet link and the Tailwind CSS browser script tag in your HTML. Installing as a node dependency is the suggested approach, but CDN usage is supported.

Why should I use daisyUI color names instead of Tailwind colors?▼

daisyUI color names like primary and base-100 are CSS variables that change automatically with the active theme, while Tailwind colors like red-500 stay fixed. Using Tailwind text colors can produce unreadable contrast on dark themes.

How do I override daisyUI component styles with Tailwind utilities?▼

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

Related Skills

Explore More Design & Creative Skills→
IgorAIvanovIgorAIvanov
1

daisyui-install

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

Community
Basic
rebyteai-templaterebyteai-template
15

web-app-builder

Build and deploy static web apps from local directories to cloud hosting.

Official
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
rayriffyrayriffy
127

daisyui

Provide semantic class names and Tailwind CSS components with themes.

Community
Advanced