DaisyUI Color Cheatsheet

Meta

🎨 DaisyUI Color Cheatsheet

This post demonstrates how DaisyUI’s semantic colors behave inside blog Markdown.

1. Colors inside not-prose

Everything here is wrapped in <div class="not-prose"> so Tailwind Typography does not override anything.
What you see is pure DaisyUI colors.

Text Colors

text-primary
text-primary-content

text-secondary
text-secondary-content

text-accent
text-accent-content

text-neutral
text-neutral-content

text-base-content
text-base-content/70 (muted)

text-info
text-info-content

text-success
text-success-content

text-warning
text-warning-content

text-error
text-error-content

Background Colors

bg-primary
bg-secondary
bg-accent
bg-neutral
bg-base-100
bg-base-200
bg-base-300
bg-info
bg-success
bg-warning
bg-error

2. Colors inside prose

Now the same classes inside prose.
Typography plugin may override paragraphs/headings, so notice the differences.

Text Colors (inside prose)

text-primary

text-secondary

text-accent

text-neutral

text-base-content

text-base-content/70 (muted)

text-info

text-success

text-warning

text-error

Background Colors (inside prose)

bg-primary
bg-secondary
bg-accent
bg-neutral
bg-base-100
bg-base-200
bg-base-300
bg-info
bg-success
bg-warning
bg-error