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