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: #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!

[luisibal]

Just a follow up, I left this message in the other thread:

I was struggling with this but the 'Solution' is not use the flowbite like this:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

Since this requires installing it with npm/ pnpm etc. and then flowbite/plugin looks up in the node_modules folder, that's why we get an error with AssetMapper because it doesn't use a node_modules folder. Using it like that was only one of the ways to use flowbite mentioned in the documentation.

https://flowbite.com/docs/getting-started/quickstart/

but simple use like this:

import 'flowbite';

in your js file where you want to use it and you can still configure tailwind the usual way.

[j0r1s]

I'm actually still needing to use the flowbite/plugin inside the tailwind.config.js otherwise some features are missing, for example the tooltip / popover arrows :

Only using import 'flowbite'; :

But after running :
yarn add flowbite

and adding the plugin to tailwind.config.js :

module.exports = {
    ...
    plugins: [
        require('flowbite/plugin')
    ]

}

The tooltip arrow is working :

I would love being able to not have a package.json file (and no yarn install inside my build step) but could not manage to make it work.

I've tried :
bin/console importmap:require flowbite/plugin

and referenced it like this inside my tailwind.config.js :

module.exports = {
    ...
    plugins: [
        require('./assets/vendor/flowbite/plugin.js')
    ]

}

It's working but the tailwind compilation fails, it cannot find the dependencies of the plugin (for example mini-svg-data-uri)

If anyone found a way to make it work, I would be very interested !

[CODEheures]

This do the trick for me (test on date-picker for me):

php bin/console importmap:require flowbite
php bin/console importmap:require flowbite/plugin

In assets/styles/app.css:
@import '../vendor/flowbite/dist/flowbite.min.css';

In assets/app.js:

import 'flowbite';
import 'flowbite-datepicker';

That's all

[j0r1s]

thanks for sharing @CODEheures but this does not fix the issue, the flowbite/plugin is still not used during tailwind compilation, therefore some styles are still missing.

[CODEheures]

@j0r1s I see that on popover whith my code:

It seem correct. No?

for precision, I don't have any css on block stylesheet and only importmap on javascript block:

        {% block stylesheets %}
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}

I use

• php8.4.5
• symfony7.2.4
• tailwind binary version 4.1.4 for windows x64

[j0r1s]

tailwind binary version 4.1.4 for windows x64

Good call ! With tailwind 4, flowbite does not need a custom tailwind.config.js file, this is why yours is working but not mine. Maybe I just should look to upgrade. Thanks for pointing this out.