Tailwind v3 neutral color palette no longer working after installing daisyui

[sbahman]

Tailwind added the neutral color palette for v3 https://tailwindcss.com/docs/customizing-colors. After installing daisyui there is a conflict as daisyUI also defines a neutral color.

This can be fixed with the following addition to the tailwind.config as described in this StackOverflow post

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {
            colors: {
                neutral: colors.neutral,
            }
        }
    },
    plugins: [
        require("daisyui")
    ],
}

If possible I think this should not be necessary or else this should be mentioned in the docs.

[shrekuu]

I also find my neutral color does not work now. eg: bg-neutral-300

I got neutral, neutral-focus, neutral-content these 3 colors.

[saadeghi]

This is the reason why it's not working: https://github.com/saadeghi/daisyui/issues/683#issuecomment-1086754993

I will try to find a way to fix this without creating duplicate styles...

[ben-xD]

Extra note: This also happens with primary, probably for the same reason. I agree that "semantic color names" (primary) is nicer than using actual colors - that's why I'm using it even with tailwind (before I heard of DaisyUI). It's not nice that my colors are broken. 🤓😅

Side note: I think it would be fine if DaisyUI overrides them, but currently it doesn't look like there is a way to configure the color palette (50, 100, 200, ..., 800, 900).

DaisyUI was really nice to use today in some experimentation. Thanks :)

[ylor]

Was also bitten by this.

I would also suggest that daisyUI, as a Tailwind library, should only extend/enhance Tailwind's defaults.

(@saadeghi Many thanks for your work here, I am not a designer but daisyUI helped me get something nice to look at in the browser in record time)

[saadeghi]

Fixed in latest version 2.49.0