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.