Flowbite CSS plugin is not working when including it in tailwind.config.js

Question

I'm using Flowbite (both JS and CSS) in my application. JS was inserted and works (using Webpack and import 'flowbite' in the entry point JS).

For the CSS, I'm using this in the tailwind.config.js file as the documentation tells you to do.

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {}
  },
  plugins: [
    require('flowbite/plugin')
  ]
}

However when compiling everything (npx tailwind build) the CSS doesn't seem to be included in the final CSS file.

I can tell because the FlowBite modal should have a dark background (making everything except the modal darker), but that background does not appear when creating the compiled CSS.

When I do include the flowbite.css manually though, it does render correctly. So the current working solution I have is (in my HTML):

<!-- TODO: Adding the plugin in tailwind.config.js does not work -->
  <link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />

But I'd like to have it compiled automatically from the Tailwind build command.

Aracelyaraceous

Can you share how you included the JS file? Interactive components are not working in my application. – Fic

Answer 1

Someone in the Discord community answered to me directly. I had to include this:

module.exports = {
  content: ['./src/**/*.html', './node_modules/flowbite/**/*.js'],
  plugins: [
    require('flowbite/plugin')
  ]
}

The './node_modules/flowbite/**/*.js' in content was missing.

Aracelyaraceous

This does not work for me. The provided solution from the main author does work, though. I am running rails, and the CSS files / classes are not loaded properly. don't know how to solve this, besides loading the CSS from the CDN (which is, obviously, not ideal!) – Menon

Answer 2

In doc: <script src="../path/to/flowbite/dist/flowbite.min.js"></script> So we need to change to correct path to our flowbite dist in node_modules. Example: <script src="./node_modules/flowbite/dist/flowbite.min.js"></script>

Award

Answer 3

If you are working on rails app then open your tailwind.config.js and comment this line:

require('flowbite/plugin')

it will work.

Slug

Answer 4

Tried many way doesn't work. So I have quick fix, add this css:

.h-modal{
    background-color: rgba(0,0,0,0.3);
}

Libertinism