1

I have been using tailwindcss for my react project and would now like to use daisy-ui in addition. I installed it as instructed and added the plugin to my tailwind.config. After doing this some of the designs in the page look off. In particular the ones styled with border-neutral-500, bg-neutral-500 - for these colors I also no longer see the little color indicator in vscode.

I am not using a custom theme but when looking at it it seems daisyUI is specifying its own version of the neutral color. https://daisyui.com/theme-generator/ vs https://tailwindcss.com/docs/customizing-colors - is this the source of the problem? How can I avoid this?

sev
  • 1,500
  • 17
  • 45
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Aug 31 '22 at 09:50

1 Answers1

4

I guess there is really conflict with utilities. DaisyUI extending theme colors with its own

You may reassign neutral color palette again with default Tailwind values like

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

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

This way both Tailwind bg-neutral-500 and Daisy btn-neutral (for example) will work

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38
  • 1
    This worked!! But I am surprised that this was necessary since daisyui is supposed to integrate well with tailwind. I also found no official documentation or anyone else asking this question - any idea why? – sev Aug 29 '22 at 14:17
  • Found [this issue](https://github.com/saadeghi/daisyui/issues/683) – Ihar Aliakseyenka Aug 29 '22 at 14:48
  • 1
    According to that issue, the above approach will only reenable the tailwind colors - instead they suggest to rename the tailwind color with `neutralgray: colors.neutral` – sev Aug 30 '22 at 07:34