Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please support classNamePrefix #659

Open
lyluongvan90 opened this issue Mar 28, 2024 · 0 comments
Open

Please support classNamePrefix #659

lyluongvan90 opened this issue Mar 28, 2024 · 0 comments

Comments

@lyluongvan90
Copy link

lyluongvan90 commented Mar 28, 2024

Curent situation:
Suppose I write an input component:
<Input variant="static" type="text" />
And here following is the html code it generated:
<input class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all border-b placeholder-shown:border-blue-gray-200 text-sm pt-4 pb-1.5 border-blue-gray-200 focus:border-gray-900" type="text" />

Problem: In my project, I set up prefix "tw-" for all tailwindcss. So the above generated html doesnot work. It should be the following as my expected:
<input class="tw-peer tw-w-full tw-h-full tw-bg-transparent tw-text-blue-gray-700 tw-font-sans tw-font-normal tw-outline tw-outline-0 tw-focus:outline-0 tw-disabled:bg-blue-gray-50 tw-disabled:border-0 tw-disabled:cursor-not-allowed tw-transition-all tw-border-b tw-placeholder-shown:border-blue-gray-200 tw-text-sm tw-pt-4 tw-pb-1.5 tw-border-blue-gray-200 tw-focus:border-gray-900" type="text" />

Expected:
To resolve the problem, please make as the following:

  • Support prefix for class name in a config file. For example, in tailwind.config.js, allow prefix field like the following:
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  prefix:  "tw-",
});
  • Support props "classNamePrefix" for all component. For example
    <Input variant="static" type="text" classNamePrefix="tw-" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant