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

user_3514925 0
Viewed 1629

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 ?

uicomponents tailwind-css
1 Answers

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;
      /***/
    },
user_69022950
Related