daisyui-install

Installs and configures daisyUI 5 with Tailwind CSS 4 across frameworks and CDN setups.

Updated Sep 3, 2024
One-click install
npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-install-eminboydak
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: daisyui-install
Source: https://github.com/eminboydak/duckTerm/tree/main/.agents/skills/daisyui/install
Command: npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-install-eminboydak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up daisyUI 5 correctly requires knowing that it depends on Tailwind CSS 4, that the old tailwind.config.js file is deprecated, and that each framework has a different CSS entry point. This Skill provides the exact installation commands and CSS configuration so you avoid version mismatches and broken builds. ## Core Features & Use Cases - npm-based installation: Run npm i -D daisyui@latest and add @import "tailwindcss"; plus @plugin "daisyui"; to your CSS file. - CDN setup: Load precompiled daisyUI CSS and the Tailwind browser build via jsDelivr links, with an option to include all built-in themes through themes.css. - Framework-specific guides: Pointers to official setup instructions for over 30 frameworks and build tools including Vite, SvelteKit, Next.js, Nuxt, Astro, and Rails. - Use Case: You are building a Tauri desktop app with Svelte 5 and Tailwind CSS v4 and need to add daisyUI components; this Skill gives you the exact dependency and CSS plugin configuration without a tailwind.config.js file. ## Quick Start Install daisyUI 5 in my project and configure my CSS file to work with Tailwind CSS 4.

Frequently Asked Questions about daisyui-install

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 deprecates tailwind.config.js, so no config file is needed.

How to use daisyUI 5 from a CDN without npm?

Add the jsDelivr link for daisyUI 5 CSS and the Tailwind browser build script tag to your HTML. To load all built-in themes, also include the daisyUI themes.css CDN file.

Does daisyUI 5 work with tailwind.config.js?

No. Tailwind CSS v4 deprecates tailwind.config.js, and daisyUI 5 requires Tailwind CSS 4. Configuration moves into the CSS file using @import "tailwindcss"; and @plugin "daisyui"; directives.

Can I use daisyUI 5 with Vite, Next.js, or SvelteKit?

Yes. daisyUI 5 provides framework-specific installation guides for over 30 tools including Vite, Next.js, SvelteKit, Nuxt, Astro, and Rails. Each framework may use a different CSS entry point, so follow the guide for your setup.

What are the limitations of the daisyUI CDN files?

The CDN files do not include the is-drawer-open: and is-drawer-close: variants. The main CDN file includes only light and dark themes; load themes.css separately for all built-in themes.