Plans for compatibility with Tailwind v4

[tiloburgey]

Hi,

tailwind v4 was released and I've tested a few components with the new version like the FwbModal. Unfortunately the new version is breaking things, for me at least, I'd be glad if someone can confirm issues as well.
Are there currently any plans to support a new tailwind version?

I've used the following versions in my testings.

    "@tailwindcss/cli": "^4.0.3",
    "flowbite": "^3.1.1",
    "flowbite-vue": "^0.1.7",
    "tailwindcss": "^4.0.3",

[Sqrcz]

Hey,

I've already started working on it... but I'm struggling a bit with setting up new config without tailwindcss.config.js 🙈

I'll update you here as soon I have some progress.

[MajedMuhammad]

@Sqrcz, Configs should be placed in the main CSS file. I don't see a main CSS file in there. Could we create a one and put the configs?

  content: [
    './docs/.vitepress/**/*.{js,ts,vue}',
    './docs/**/*.{js,ts,vue,md}',
    './src/**/*.{js,ts,vue}',
  ],

The new way is that will be scanned automatically. However, if we would need to register sources explicitly, then in the main CSS file:

@source "../docs/.vitepress/**/*.{js,ts,vue}";
@source "../docs/**/*.{js,ts,vue,md}";
@source "./**/*.{js,ts,vue}'";

Tailored so if the main.css is in src dir.

For the plugins:

  plugins: [
    flowbitePlugin(),
  ],

The plugin itself shouldn't be JS-based as mentioned, but should still work like so:

@plugin "flowbite/plugin;`

Should you have any questions, kindly do not hesitate to ask.
I would be happy if this can help.

[Sqrcz]

Hey @tiloburgey and @MajedMuhammad

Here is PR related to Tailwind v4: #360

Please take a look, and let me know if you have any issues with it.... Thanks!

[Sqrcz]

Update to support Tailwind CSS was merged recently... Please follow new configuration to make it work: https://flowbite-vue.com/pages/getting-started

[jk2K]

how to work with vitepress?

vuejs/vitepress#4856

I created a test repo and the button style are not displaying properly

https://github.com/jk2K/testvitepress

=======
update, fixed