You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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:
<Input variant="static" type="text" classNamePrefix="tw-" />
The text was updated successfully, but these errors were encountered: