Prefixes in components

[desprit]

Describe the bug
Tooltip and Dropdown components don't work when tailwindcss prefix is set.

To Reproduce
Steps to reproduce the behavior:

1. Setup prefix in the tailwind.config.js:

module.exports = {
  prefix: "tw-",
  ...
}

2. Create a tooltip component https://flowbite.com/docs/components/tooltips/
3. Add prefixes to default styles
4. Launch your app and see tooltip not working

Expected behavior
Components support custom prefixes

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 100.0.4896.75

Additional context
Components have default tailwindcss classes hardcoded: https://github.com/themesberg/flowbite/blob/main/src/components/tooltip.js#L70 and there is no prefix injection there

[dan-valang]

I'm also having the same issue with the modal window

[zoltanszogyenyi]

Will introduce prefixes for v1.5.

[zoltanszogyenyi]

@desprit @dan-valang

This is now fixed on the develop branch by using a special function that introduces the prefix to all injected classes.

It will directly look into the tailwind.config.js file and using the getPrefixedClassName and getPrefixedClassName functions it will introduce the prefix, if it's being set.

Source: https://github.com/themesberg/flowbite/blob/develop/src/components/modal.js

Another feature is that you will be able to set the prefix for the data attributes too, such as data-fb-dropdown-toggle by adding it in the flowbite.config.js file like this:

module.exports = {
    prefix: 'fb-'
}

This will be pushed to NPM for the v1.5.

[desprit]

This is great @zoltanszogyenyi , thank you very much!

[BogdanCln]

This will be pushed to NPM for the v1.5.

Hello @zoltanszogyenyi,

Thank you for this great module.
Will the getPrefixedClassName changes be pushed to NPM eventually? 🤞

[adam-clio]

@zoltanszogyenyi we're on 1.6 now and these changes are still in develop. Any chance they're going to make it into the next release?

[AstrisDev]

Any chance to fix this issue in the next releases? v1.6.3 flowbite still not working properly with tailwind prefixes.

[bspyropoulos]

Any news on that?

[zoltanszogyenyi]

Hello everyone,

I'm trying my best to get this out in the next release, unfortunately I'm the only one maintaining the repository right now and it's a bit difficult to keep up with other issues as well. A branch has already been started and theoretically there's not too much left to do - the way it will work is that it will automatically take the prefix settings from the tailwind.config.js file.

Can't give an ETA but it should be live in the next couple of months.

Thanks <3

Zoltan

PS: PR's are more than welcome for help, it's an open-source project

[linpan]

Tooltip and Dropdown components don't work when tailwindcss prefix is set. this bug waste me one day.

[fabarea]

Same. I can confirm that the prefixing will cause an issue with the toggle component. When prefixing is applied, the toggle component fails to display the larger "dot" element.

[1day2die]

damn this is still a bug? fuck me

[majermi4]

Hi, we love Flowbite and we would like to use it as a base for our project. However, we're in the process of migration between 2 tailwind and bootstrap and custom theme with similar utility classes like bootstrap. That's why we need to add prefixes to all tailwind classes which is why I got here. I realised that we cannot use the provided JS because it doesn't add prefixes to classes.

Is there any chance this is going to be fix/released soon or some workaround for time being?

Thank you!

[AmirJavaidSwe]

is this solved? i am also using prefix in tailwind tw- and seems due to that this isn't working for me

[fedegonzal]

Hi, I had the same problem. I'm using "tw-" as a prefix (take a look at my example below). Based on the dropdown code, https://github.com/themesberg/flowbite/blob/main/src/components/dropdown/index.ts I made a workaround while the official fix is ready:

// be sure this script is loaded after flowbite
window.onload = function() {

    // loops through all dropdowns and initializes them
    document.querySelectorAll('[data-dropdown-toggle]').forEach(($triggerEl) => {
        const dropdownId = $triggerEl.getAttribute('data-dropdown-toggle');
        const $dropdownEl = document.getElementById(dropdownId);

        // creates a new instance of the dropdown
        let dropdownInstance = new Dropdown($dropdownEl, $triggerEl);

        // overrides the show and hide methods with your desired prefix
        // I'm using tw- as an example, but you can use any prefix you want
        dropdownInstance.show = function() {
            this._targetEl.classList.add('tw-block');
            this._targetEl.classList.remove('tw-hidden');

            this._setupClickOutsideListener();

            // update its position
            this._popperInstance.update();
            this._visible = true;
        };

        dropdownInstance.hide = function() {
            this._targetEl.classList.add('tw-hidden');
            this._targetEl.classList.remove('tw-block');

            this._visible = false;
            this._removeClickOutsideListener();    
        };
        
    });
};

I'm sure it could be better, but works.

[0Chan-smc]

Why is this still not fixed? Even though the Flowbite version is 2.3!

[anejjar]

Any news about this please??

[victorwitei]

I have found a fix for the dropdown's based on CSS, at least with this fix I can avoid add more JS to my file:

[data-dropdown-toggle] + .block {
  display: block;
}

[data-dropdown-toggle] + .hidden {
  display: none;
}

[Atydin]

Any news?

[Fejlip]

Any updates on this? Would be greatly appreciated if this got added

[mbajur]

I can see that now all the components are using getPrefixedClassName function which adds the prefix from tailwind config. If there was any way to overwrite it's behaviour or be able to provide the prefix manually...

PS. Maybe there is, I'm just not JS fluent enough to tackle that by myself
PS2. @zoltanszogyenyi would that be acceptable to modify components code and proxy getPrefixedClassName via this.getPrefixedClassName method on each component so we can at least overwrite it's behaviour in a similar way @fedegonzal described? I'm talking about something like having a following code in the components:

class Drawer {
   ...

  _getPrefixedClassName(value) {
    return getPrefixedClassName(value)
  }
}

So at least we can do

drawerInstance._getPrefixedClassName = function(value) {
  return value.replaceAll('%p%', 'my-prefix-')
}