Overriding plugin config with theme.color is not working

[whanso]

Hello,

I am working on my tailwind.config.js file that incorporates a plugin.

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

/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#fff',
      gray: {
        100: '#B1B3B399',
        200: '#B1B3B3CC',
        300: '#B1B3B3',
      },
    },
  },
  plugins: [require('flowbite/plugin')],
};

Using the colors object in tailwind.config.js, I was expecting usages of gray-300 in my app to be the value I provided, but instead it is picked up as the value in the plugin.

Here is the unpkg of the plugin: https://unpkg.com/[email protected]/plugin.js

Expected result: The configuration for tailwind.config.js should take priority of the a plugin configuration. The flowbite documentation states that the colors can be overridden and replaced.
Actual result: The plugin configuration takes priority over the tailwind.config.js theme.

** Wrong Computed Value (equates to #d1d5db, from Flowbite plugin): **

OS: MacOS

[jeff-treuting]

I'm running into this problem as well. Is there a workaround?

[wongjn]

You could define your colors in theme.extend.colors, see this Tailwind Play (open the Generated CSS panel).

[jeff-treuting]

that works, thank you. I thought extend was only for new colors, so I had the colors in the theme, which worked except for when the flowbite plugin was set.

thanks for the quick response.