Flowbite / Tailwind V4

[terza98]

Noticed the docs are not updated to work with Tailwind's new V4 version. Any ideas on how to setup Flowbite on Tailwind V4?

[SutuSebastian]

ey there, V4 is not even yet officially release and lot of API's might change, it's basically redundant to start supporting it before release.

Check here, not even their docs offer the option to even check the V4 docs

[mrjohnr]

tailwind 4 is officially released

[SutuSebastian]

Working on it

[Aashir1]

It seems flowbite-react latest version still have old tailwind, someone could please notify here from flowbite-react team once it is ready with tailwind v4 :)

[SutuSebastian]

@Aashir1 u can subscribe to this issue and get notified faster when we publish the next update.

PS. We're gonna support both v3 and v4.

[Aashir1]

@SutuSebastian done 👍

[mrjohnr]

I've installed tailwind 4 with -- force but where flowbite-react plugin can be added since v4 is not using tailwind.config.js ?
thanks

[SutuSebastian]

I've installed tailwind 4 with -- force but where flowbite-react plugin can be added since v4 is not using tailwind.config.js ? thanks

U would have to link back to an tailwind.config.js using @config "../tailwind.config.js"; and keep the same setup as today.

Note that the scanned classes are still using the old v3 unconverted classes (see below), which won't work accordingly.

v3	v4
shadow-sm	shadow-xs
shadow	shadow-sm
drop-shadow-sm	drop-shadow-xs
drop-shadow	drop-shadow-sm
blur-sm	blur-xs
blur	blur-sm
rounded-sm	rounded-xs
rounded	rounded-sm
outline-none	outline-hidden
ring	ring-3

As a quick update, I am actively working on the new version that brings support for both v3 and v4, with a much easier one CLI command setup, no more manual steps.

Keep close.

[mrjohnr]

the only way that worked for me and imported plugin with older config file is using new Vite configuration

placing @config "../tailwind.config.js"; in index.css got
Cannot read properties of undefined (reading 'content')

tailwind.config.js:

import flowbite from "flowbite-react/tailwind";

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", flowbite.content()],
  plugins: [
    flowbite.plugin(),
  ],
};

thanks

[mrjohnr]

there was a problem with my config file,the working content is

const flowbite = require("flowbite-react/tailwind");

module.exports = {
  content: [
    flowbite.content(),
  ],
  plugins: [
    flowbite.plugin(),
  ],
};

now it work also with cli (new command is : npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch )

in input.css

@import "tailwindcss";

@config "../tailwind.config.js";

from flowbite I'm ony using badge,modal and sidebar that seem to work with v4

thanks

[Ionut27]

any ETA for that?
thanks

[SutuSebastian]

@Ionut27 closer than ever.

[falihnaufal17]

subscribed sir, I'm really looking forward for next update!. Thanks!

[sazzer]

Until this is completed, is there a supported way to use Flowbite dropdowns - either with Flowbite-react or just with standard Flowbite - that will work with React, Flowbite 3.1.2 and Tailwind 4?

Cheers

[ymmt07039]

The Modal component uses the deprecated 'bg-opacity-*' utility.

[SutuSebastian]

Until this is completed, is there a supported way to use Flowbite dropdowns - either with Flowbite-react or just with standard Flowbite - that will work with React, Flowbite 3.1.2 and Tailwind 4?

Cheers

U can use any standard Flowbite component in React (or any other React based frameworks) by switching the HTML templating to JSX (eg: class -> className).
As for the components that require JS, like in this case Dropdown, here's a quick snippet that works pretty nice:

function Dropdown() {
  useLayoutEffect(() => {
    import("flowbite").then(({ initDropdowns }) => initDropdowns());
  }, []);

  return (
    <div>
      <button
        id="dropdownDefaultButton"
        data-dropdown-toggle="dropdown"
        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        type="button"
      >
        Dropdown button{" "}
        <svg
          className="w-2.5 h-2.5 ms-3"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 10 6"
        >
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="m1 1 4 4 4-4"
          />
        </svg>
      </button>

      <div
        id="dropdown"
        className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
      >
        <ul
          className="py-2 text-sm text-gray-700 dark:text-gray-200"
          aria-labelledby="dropdownDefaultButton"
        >
          <li>
            <a
              href="#"
              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Dashboard
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Settings
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Earnings
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Sign out
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}

The important thing when using standard Flowbite components in a React based application, is to register the component in it's own lifecycle using the init<TYPE> function.

[SutuSebastian]

The Modal component uses the deprecated 'bg-opacity-*' utility.

Fixed in the #1498 .

[sazzer]

The important thing when using standard Flowbite components in a React based application, is to register the component in it's own lifecycle using the init<TYPE> function.

Ooh - that's interesting. I'd (naively) assume that you couldn't just use the init<TYPE> functions in React - the same way that you can't do the Bootstrap equivalent - and that the React library was there to help with that.

Cheers

[SutuSebastian]

@sazzer It's not the preferred way to use vanilla JS init<TYPE> functions to bring reactivity to components in an already reactive system (React in our case), but it's doable!

That is the exact reason why flowbite-react exists.

[armandsuiska]

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/tailwindcss
npm error dev tailwindcss@"4.0.12" from the root project
npm error
npm error Could not resolve dependency:
npm error peer tailwindcss@"^3" from [email protected]
npm error node_modules/flowbite-react
npm error flowbite-react@"0.10.2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error

is there any news on when the tailwindcss v4 will be supported?

[SutuSebastian]

@armandsuiska doing my best to wrap it up, once in for all.

Quick update:

• docs are almost ready
• engine fully functional, for both v3 and v4 (automatically), still some minor issues with tailwind version detection function, trying to prototype a more robust solution now that works on all bundlers.

[addoinc]

Hi, is the release date anytime soon, I have to start development on a project, if it is due within a week or so I can wait, but the longer it goes, it is gonna affect our development.

[SutuSebastian]

Hi, is the release date anytime soon, I have to start development on a project, if it is due within a week or so I can wait, but the longer it goes, it is gonna affect our development.

I'm in the process of writing the release changelog as we speak.

[rotimi-aj]

Thank you for all your efforts @SutuSebastian

I can't also install flowbite on Tailwind v4 with the CLI npm i flowbite-react

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/tailwindcss
npm error dev tailwindcss@"^4" from the root project
npm error
npm error Could not resolve dependency:
npm error peer tailwindcss@"^3" from [email protected]
npm error node_modules/flowbite-react
npm error flowbite-react@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:

[SutuSebastian]

@rotimi-aj the error is because the new version is not released yet. Just give it one more day please.

(I can feel the pressure)

[armandsuiska]

@SutuSebastian please don't rush it - we don't need unstable version.

[SutuSebastian]

@SutuSebastian please don't rush it - we don't need unstable version.

Indeed, although the current version is more unstable than this one, with many more flaws and issues.

One thing to keep in mind is that we are not v1 yet, which means there are gonna be breaking changes if we need to make them in order to achieve v1 production grade.

I'll create a more detailed roadmap so that everything is transparent and open for contribution.

[SutuSebastian]

Tailwind CSS v4 support is here, and many more goodies 🚀

Have fun!

[Aashir1]

Thanks man!

…

On Mon, 24 Mar 2025 at 10:39 PM, Sutu Sebastian ***@***.***> wrote: Tailwind CSS v4 support is here, and many more goodies 🚀 Have fun! — Reply to this email directly, view it on GitHub <#1508 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGA26I3DT2OW3JE5BM2TQT32WA7NZAVCNFSM6AAAAABRPMFC32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBYHEZTAMZSG4> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: SutuSebastian]*SutuSebastian* left a comment (themesberg/flowbite-react#1508) <#1508 (comment)> Tailwind CSS v4 support is here, and many more goodies 🚀 Have fun! — Reply to this email directly, view it on GitHub <#1508 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGA26I3DT2OW3JE5BM2TQT32WA7NZAVCNFSM6AAAAABRPMFC32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBYHEZTAMZSG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Rahat47313]

Congrats and thanks a lot!!!