skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

daisyui-colors

Applies daisyUI 5 semantic color names and theme configuration rules to Tailwind CSS projects.

Updated May 26, 2026
Search Tags:#theming#color palette#tailwind css#dark mode#css variables#ui styling#daisyui
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill daisyui-colors-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-colors
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/daisyui/colors
Command: npx skills add https://github.com/rmethodm/resumegen --skill daisyui-colors-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing hardcoded Tailwind colors like red-500 or text-gray-800 breaks dark mode and theme switching, producing unreadable or inconsistent UI. This Skill enforces daisyUI 5 semantic color usage so components adapt automatically to any theme. ## Core Features & Use Cases - Semantic Color Reference: Lists all daisyUI 5 color names (primary, base-100, *-content, info, success, etc.) with their intended usage. - Color Usage Rules: Enforces theme-aware styling, such as avoiding dark: variants, using *-content colors for contrast, and reserving primary for the single most important element. - Theme Configuration: Shows how to enable built-in themes, apply data-theme attributes, define custom themes with CSS variables, and override existing themes. - Use Case: When building a card component, use bg-base-100 text-base-content instead of fixed grays so the card renders correctly in both light and dark themes without extra code. ## Quick Start Ask the AI to style a component using daisyUI semantic colors and create a custom daisyUI theme with your brand colors.

Frequently Asked Questions about daisyui-colors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use daisyUI colors in Tailwind CSS classes?▼

Use daisyUI semantic color names directly in utility classes, such as `bg-primary`, `text-base-content`, or `bg-base-200`. These names work like standard Tailwind colors but resolve to CSS variables that change with the active theme.

How do I create a custom daisyUI 5 theme?▼

Define a custom theme using the `@plugin "daisyui/theme"` directive in your CSS file, setting a name and all required `--color-*` variables in OKLCH or hex format. Set `default: true` to make it the default theme.

Should I use Tailwind colors like red-500 with daisyUI?▼

Avoid fixed Tailwind colors for themeable UI because they stay constant across themes and can become unreadable, such as `text-gray-800` on a dark `bg-base-100`. Use daisyUI semantic names like `text-error` instead, reserving fixed colors only for theme-independent elements like charts.

Does daisyUI need the dark: variant for dark mode?▼

No, daisyUI color names automatically adapt to the active theme, so the `dark:` variant is unnecessary. If you want Tailwind's `dark:` variant to follow specific daisyUI themes, define a custom variant targeting the theme's `data-theme` attribute.

What are daisyUI content colors used for?▼

Content colors like `primary-content` and `base-content` are foreground colors designed to contrast with their paired background color. Use them for text and icons placed on the corresponding colored surface to maintain readability across themes.

Related Skills

Explore More Design & Creative Skills→
aster-voidaster-void

daisyui

Apply DaisyUI semantic components and themes within Tailwind projects.

Community
Basic
wenermewenerme
7

daisyui-v5

Provide semantic, theme-aware daisyUI v5 class names for Tailwind CSS v4 UIs.

Community
Intermediate
anouar1991anouar1991
1

dark-mode-tester

Audit dark mode rendering and color contrast against WCAG 2.1 guidelines.

Community
Advanced
GP-SoftwareDivisionGP-SoftwareDivision

animate

Plan and implement purposeful UI animations with accessibility and performance considerations.

Official
Advanced