Incorporating Flowbite (both JS and CSS) into my application has been a bit of a challenge. I managed to successfully insert the JS using Webpack and import 'flowbite' in the entry point JS file.
As for the CSS, I followed the documentation and added it to the tailwind.config.js file like so:
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [
require('flowbite/plugin')
]
}
Despite all this, when I compile everything with npx tailwind build, the CSS doesn't seem to be included in the final output file. This is evident because the FlowBite modal should have a dark background effect, but it's missing in the compiled CSS.
To work around this issue, I manually include the flowbite.css in my HTML like this:
<!-- TODO: Adding the plugin in tailwind.config.js does not work -->
<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />
However, my goal is to have this CSS automatically compiled along with Tailwind build command without any manual intervention.