安装daisyUI后TailwindCSS neutral-500颜色失效问题求助

在React项目中使用TailwindCSS，引入daisyUI并在tailwind.config中添加插件后，页面中使用border-neutral-500、bg-neutral-500的元素样式异常，且VSCode中不再显示这些颜色的小指示器。未自定义主题，但发现daisyUI定义了自身的neutral颜色版本，这是否是问题根源？该如何解决？

没错，问题根源就是daisyUI覆盖了Tailwind默认的neutral色板。daisyUI会替换Tailwind原生的颜色系统（包括neutral在内的默认颜色），改用自己定义的配色方案，导致原来的neutral-500等类对应的颜色值被改变，VSCode的Tailwind插件也因为色板变更无法识别原颜色。

可选解决方法如下：

• 禁用daisyUI的颜色替换，保留Tailwind原生颜色
  在tailwind.config.js中配置daisyUI时添加styled: false，让daisyUI仅提供组件样式，不替换Tailwind原生色板：

module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    styled: false,
  },
}

• 改用daisyUI的neutral色板
  如果想保留daisyUI的组件样式，可直接使用其定义的neutral颜色。daisyUI的neutral色值与Tailwind原生不同，可确认其内置的neutral-500等色值是否符合需求，直接替换代码中的颜色类即可。

• 自定义扩展色板，同时保留原生和daisyUI颜色
  若需同时使用两者的neutral颜色，可在tailwind.config.js中自定义一个新前缀的色板（比如tw-neutral），复制Tailwind原生neutral的色值：

module.exports = {
  theme: {
    extend: {
      colors: {
        'tw-neutral': {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5',
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373',
          600: '#525252',
          700: '#404040',
          800: '#262626',
          900: '#171717',
        },
      },
    },
  },
  plugins: [require('daisyui')],
}

之后即可通过bg-tw-neutral-500、border-tw-neutral-500使用Tailwind原生neutral颜色，同时不影响daisyUI的组件样式。

内容的提问来源于stack exchange，提问作者sev