[BUG] - Adding custom tailwind class prefix breaks styles

[VanemalP]

NextUI Version

2.4.6

Describe the bug

When adding custom tailwind class prefix in tailwind.config, styles of the components are broken

Your Example Website or App

https://codesandbox.io/p/sandbox/nextui-tw-calss-prefix-9dlzwx

Steps to Reproduce the Bug or Issue

1. Add custom class prefix in tailwind.config file:

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

2. Use any component
3. Notice how styles are broken

Expected behavior

As a user, I expect to be able to add custom tailwind class prefix, without breaking nextui components styles.

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-1230 [BUG] - adding custom tailwind class prefix breaks styles

[wingkwong]

You put it in the wrong place.

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [nextui({
    prefix: "tw-", // custom prefix for tailwind classes
  })],
};

[VanemalP]

@wingkwong Why did you close the issue? The "solution" you are suggesting is doing a totally different thing. If I add prefix to the nextui plugin, this will only change the prefix of the css variables exported from nextui. I would like to change the prefix of the tailwind classes, so instead of text-red-500, I would use tw-text-red-500. This should be taken into account so that all nextui components will use classes with this prefix, and styles will not break.

[wingkwong]

Oops sorry. I thought you were talking about the NextUI button style. I can reproduce the issue with your new statement. Reopening it.

[luokuning]

Looks like this is a common problem that many Tailwind CSS based UI libraries would face if they decide to let users generate those styles instead of shipping styles inside the package.

Because of how Tailwind CSS scans classnames, I think it's not feasible to dynamically add prefix for classnames in next-ui components, for example, add support for letting users provide a classname prefix when using next-ui.

[Stybo]

Providing a custom prefix messes up the styles

Removing the prefix, or renaming it to "heroui" results in this. As it should be

Still no fix for this?