It is possible to using flowbite (or any UI component libraries) for tailwindCSS on angular 12?

Question

I'm trying to use tailwindCSS on angular 12, and it's works fine.

My question is about using flowbite or tailwindui for UI component - is it support on angular too? because i'm trying to flow the instructions of flowbite and it's not working https://flowbite.com/docs/getting-started/quickstart/ the css work's fine but not the script.

For example I try to build a dropdowns like this - and it's not working (i'm not getting any error on console) https://flowbite.com/docs/components/dropdowns/#

What is wrong ?

Answer 1

Having the same issue, tried:

• Using scripts:["../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"] in angular.json
• Adding <script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script> on the head of index.hmtl

Update: Adding import '@themesberg/flowbite'; on either the main.ts or polyfills.ts correctly exports the functions to the vendor.js or polyfills.js respectfully. But even though they are present, the event listeners are not working:

() => {
      const toggleCollapse = (elementId, show = true) => {
        const collapseEl = document.getElementById(elementId);

        if (show) {
          collapseEl.classList.remove('hidden');
        } else {
          collapseEl.classList.add('hidden');
        }
      }; // Toggle target elements using [data-collapse-toggle]


      document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
        var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
        collapseToggleEl.addEventListener('click', function () {
          toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
        });
      });
      window.toggleCollapse = toggleCollapse;
      /***/
    },