Using flowbite with assets-mapper

[LyamD]

Hi, I'm trying to use the flowbite plugin with Symfony 7, assets-mapper and the tailwind-bundle.

I can't get the JS of flowbite to work. I've followed line by line the Symfony documentation, restarted the project from scratch, also tried the few tricks from this issue: https://github.com/SymfonyCasts/tailwind-bundle/issues/36

No matter how I import ("flowbite/plugin", "flowbite/plugin.js", full path), and I think i've tried every combination possible within app.js, tailwind.config.js and importmap.php, but it is still not working.

I don't have any js console errors, custom js and css are loaded, but none of the flowbite component are working.

What am I missing ? Is it still possible to do it ?

[bocharsky-bw]

Hm, the import path should be relative, it depends on where the file is located in which you're trying to include that flowbite. But IIRC you need to import the main flowbite package:

// The path should be correct only if you're in assets/app.js, otherwise change it correspondively
import '../vendor/flowbite/flowbite.js';

And I think in your tailwind.config.js it should be something like:

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

And in importmap.php:

return [
    'imports' => [
        'flowbite' => 'assets/vendor/flowbite/flowbite.js',
    ],
];

I hope that helps!