skills.rest
Ocyss
OcyssCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing consistent, theme-aware UI components with Tailwind CSS requires memorizing dozens of utility classes and manually handling dark mode, colors, and component structure. This Skill provides the official daisyUI 5 component reference so generated HTML/JSX uses correct class names, semantic colors, and theme variables every time. ## Core Features & Use Cases - Component Reference: Covers 60+ daisyUI components (button, card, modal, drawer, navbar, table, form inputs, etc.) with exact class names, syntax, and usage rules. - Theming & Colors: Enforces semantic color usage (primary, base-100, etc.) and documents custom theme creation via CSS variables and the daisyUI plugin config. - Installation & Configuration: Guides setup with Tailwind CSS 4 via npm or CDN, plus framework-specific integration for React, Vue, Next.js, Dioxus, and more. - Use Case: Ask for a responsive dashboard layout with a sidebar, navbar, and stat cards, and receive markup using correct drawer, navbar, and stat component classes that adapt to light and dark themes automatically. ## Quick Start Ask the AI to build a responsive landing page with a navbar, hero section, and pricing cards 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 with npm i -D daisyui@latest, then add @import "tailwindcss"; and @plugin "daisyui"; to your CSS file. Tailwind CSS v4 does not use tailwind.config.js. A CDN option with precompiled CSS is also available for no-build setups.

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

Add the component class plus optional modifier classes to HTML elements, such as class="btn btn-primary" for a button. Components can be customized with Tailwind utility classes, and the default variant should be used unless a specific color or style is requested.

Does daisyUI 5 work with React, Vue, and Next.js?▼

Yes, daisyUI 5 works with any framework that processes CSS, including React, Vue, Next.js, SvelteKit, Nuxt, Angular, and Dioxus. Each framework has a dedicated installation guide covering the correct CSS entry point and build tool integration.

How do I create a custom daisyUI theme?▼

Define a custom theme with the @plugin "daisyui/theme" directive, setting a name and all required CSS variables like --color-primary and --radius-box in OKLCH or hex. Apply it by adding data-theme="yourtheme" to the html element.

Why should I avoid Tailwind color names like text-gray-800 with daisyUI?▼

Tailwind color names stay fixed across themes, so text-gray-800 becomes unreadable on dark backgrounds. daisyUI semantic colors like text-base-content adapt automatically to the active theme, maintaining contrast without dark: variants.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
CleanExpoCleanExpo

visual-qa

Capture deterministic Playwright screenshots and diff them against stored baselines.

Community
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

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

Community
Advanced