Description
Flowbite's plugin.js contains 22 hard-coded .dark class selectors that don't respect Tailwind's darkMode configuration. This means if a project uses a custom dark mode selector — which Tailwind v3 and v4 both explicitly support — Flowbite's dark styles for form controls, tooltips, and charts silently break.
For example, Tailwind v4 lets you customize the dark variant:
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
And Tailwind v3 supports:
darkMode: ['selector', '[data-theme="dark"]']
But Flowbite's plugin ignores this and emits hard-coded .dark selectors that won't match.
Affected selectors in plugin.js (v4.0.1)
.dark [role="tooltip"] > [data-popper-arrow]:before
.dark [role="tooltip"] > [data-popper-arrow]:after
.dark [type='checkbox']:checked
.dark [type='radio']:checked
.dark [type='radio']:checked:before
.dark [type='radio']:checked:after
.dark input[type=file]::file-selector-button
.dark input[type="range"]:disabled::-webkit-slider-thumb
.dark input[type="range"]:disabled::-moz-range-thumb
.dark .selectedCell
.dark .apexcharts-canvas .apexcharts-tooltip
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title
.dark .apexcharts-canvas .apexcharts-xaxistooltip
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label
... (and more)
Expected behavior
These selectors should respect the project's configured dark mode selector rather than hard-coding .dark. The plugin could read the dark mode config from Tailwind's context and generate selectors accordingly, or use Tailwind's dark: variant properly.
Context
Flowbite v3.0 moved many dark styles to CSS variables (reducing hard-coded .dark selectors from ~39 in v2.x to ~22 in v4.x), but form controls, tooltips, and chart integrations were not migrated. Projects using Tailwind's native custom dark mode selector support currently need a workaround of applying both their custom selector and class="dark" on <html> to keep Flowbite working.
Versions
- Flowbite: 4.0.1
- Also affects: 2.x and 3.x
Description
Flowbite's
plugin.jscontains 22 hard-coded.darkclass selectors that don't respect Tailwind'sdarkModeconfiguration. This means if a project uses a custom dark mode selector — which Tailwind v3 and v4 both explicitly support — Flowbite's dark styles for form controls, tooltips, and charts silently break.For example, Tailwind v4 lets you customize the dark variant:
And Tailwind v3 supports:
But Flowbite's plugin ignores this and emits hard-coded
.darkselectors that won't match.Affected selectors in plugin.js (v4.0.1)
Expected behavior
These selectors should respect the project's configured dark mode selector rather than hard-coding
.dark. The plugin could read the dark mode config from Tailwind's context and generate selectors accordingly, or use Tailwind'sdark:variant properly.Context
Flowbite v3.0 moved many dark styles to CSS variables (reducing hard-coded
.darkselectors from ~39 in v2.x to ~22 in v4.x), but form controls, tooltips, and chart integrations were not migrated. Projects using Tailwind's native custom dark mode selector support currently need a workaround of applying both their custom selector andclass="dark"on<html>to keep Flowbite working.Versions