skills.rest
eminboydak
eminboydakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui

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

Updated Sep 3, 2024
Search Tags:#html#frontend#tailwind css#web design#ui components#daisyui#css themes
One-click install
npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-eminboydak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui
Source: https://github.com/eminboydak/duckTerm/tree/main/.agents/skills/daisyui
Command: npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-eminboydak

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing consistent, theme-aware UI components with Tailwind CSS requires memorizing dozens of utility classes and rebuilding common patterns like modals, drawers, and navbars from scratch. This Skill provides the complete daisyUI 5 component reference so generated HTML and JSX uses correct class names, structures, and theme variables every time. ## Core Features & Use Cases - Component Reference: Covers 60+ daisyUI components (button, card, modal, drawer, table, form controls, and more) with exact class names, syntax, and structural rules. - Theming & Colors: Guides semantic color usage (primary, base-100, content colors), built-in theme configuration, and custom theme creation via CSS variables. - Installation & Configuration: Provides setup instructions for Tailwind CSS 4 projects, CDN usage, plugin options like prefixes and theme selection, and framework-specific guides. - Use Case: When building a settings page for a Svelte or React app, the Skill ensures toggles, selects, and modals use proper daisyUI markup with theme-aware colors that adapt to light and dark modes automatically. ## Quick Start Ask the AI to build a responsive navbar with a dropdown menu and theme switcher 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?▼

Run 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, so all configuration happens inside the CSS file.

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

Add the component class plus optional modifier classes to your element, such as class="btn btn-primary" for a primary button. Each component has defined part, color, size, and style classes documented in its guide.

Does daisyUI 5 work with React, Vue, and Svelte?▼

Yes, daisyUI is a CSS-only library, so its class names work in any framework that renders HTML, including React, Vue, Svelte, Angular, and Solid. Framework-specific installation guides cover the correct CSS entry setup for each.

How do I create a custom daisyUI theme?▼

Define a theme with the @plugin "daisyui/theme" directive in CSS, setting a name and all required CSS variables like --color-primary and --color-base-100. 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 automatically adapt when the theme changes.

Can I use daisyUI from a CDN without npm?▼

Yes, load the precompiled daisyUI CSS and the Tailwind browser build from jsDelivr with two tags in your HTML head. The main CDN file includes light and dark themes, and a separate themes.css file loads all built-in themes.

Related Skills

Explore More Software Engineering Skills→
OcyssOcyss

daisyui-install

Guides installation of daisyUI 5 with Tailwind CSS 4 across frameworks.

Community
Basic
tonehqtonehq
11

form_page

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

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

svg-optimization-implementation

Optimize SVG assets with SVGO, currentColor conversion, and accessibility attributes.

Official
Advanced
TNHoang2708TNHoang2708
1

ck:ui-styling

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

Community
Advanced