Adding the flowbite plugin in tailwind.config.js breaks default colors, dark mode

[Hannes-Steffenhagen-bd]

Describe the bug I was following the Quickstart via NPM tutorial.

After adding

plugins: [
    ...,
    require('flowbite/plugin'),
   ...
]

in tailwind.config.js, all the default colors change – I know that the doc on colors states that the flowbite palette is a bit different by default from the tailwind default palette, however it even changes the colours I get when doing a require('tailwindcss/colors') – meaning I can't do something like

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

module.exports = {
  // ...
  { theme: {
     colors: colors
  }
}

to get the default tailwind colors, which I'd expect to work.

In addition, after adding the plugin dark mode support (i.e. classes like dark:bg-gray-800 or dark:text-white) cease to work automatically (it appears it changes tailwinds default darkMode setting from media to class, explicitly overriding it seems to work).

To Reproduce

Follow the Quickstart via NPM tutorial with an existing tailwind-based project.

Expected behavior

I'd expect to be able to be able to use the things flowbite adds without breaking stuff I was already doing with tailwind.

Screenshots

HTML:

<h1 class="text-xl bg-green-600 dark:bg-green-700 text-white">Example</h1>
<p class="dark:text-white">This should not change by adding flowbite</p>

What it's supposed to look like:

After adding flowbite (note: still in dark mode set in OS):

[delgadoVal]

Was experiencing the same issue with the dark mode. Reading their documentation, it seems that by default it sets the dark mode to use the class strategy, so adding the following in your tailwind config should fix it:

module.exports = {
  // ...
  darkMode: 'media',
  plugins: [
    require('flowbite/plugin')
  ],
}

[Hannes-Steffenhagen-bd]

@delgadoVal note that the changing of default dark mode thing is just mildly annoying, it's not really the 'bad' part. The bad part is changing the default colour scheme, for which I've not yet found a workaround other than manually copying over tailwinds default colour scheme.

[MattJonesSiteglide]

I think I've also been looking into the same issues with colour changing.

In my case we want to use a preset which re-defines gray, but in the conflict between Flowbite plugin and our preset, the Flowbite plugin's theme settings win and the grays end up Flowbite blue. Would have to set in the config itself I think in order to win the battle.

https://play.tailwindcss.com/AS6WMawRWQ?file=config <= Working example

Expected Behaviour

I'd like the preset to be able to define both gray and customgray to be the same green-tinted gray, so both divs show the same.

Actual Behaviour

The customgray definition works, because it's not affected by the Flowbite plugin, but gray is affected by Flowbite plugin, so the preset cannot override it. So the divs end up different colours.

This means it's not possible for us to use an existing colour like gray, and must make up a brand new colour. But we want to use this with Flowbite layouts which already use gray classes! We want to be able to swap out presets and change how Flowbite sites look, without changing the config.

Note that, removing the Flowbite Plugin from the config causes the expected behaviour to occur. But ideally we do want most of the benefits of the plugin, without this issue!

Suggested solutions

Perhaps a solution to this would be to add a new option to the tailwind plugin which disables it setting default theme colours? Or alternatively, remove the theme color setting from the plugin, and create a flowbite preset, which can be used more flexibly as a preset for the preset - or directly from the default configuration?