-
Notifications
You must be signed in to change notification settings - Fork 149
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
Default inputClassName not applying, and overrding inputClassName is not working #64
Comments
I have the same problem and I kind of know where it comes from. In my project I make a lot of customizable components, where I almost always pass However, I found this article: https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3 and started using The above code could look like this: return twMerge("relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded -lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed", border, ring, classNameOverload); This should fix the problem (here and everywhere where classes would be overwritten). |
This may help: #68 :) |
Thank you, how do I install from your repo instead of the default? I can't seem to get it to work with
|
I only created this repo for pull request - you have to wait for merge to @onesine's project :) |
Hi @nate-dash & @giero 👋 Sorry for the delay. Thank you for your comments. This is indeed an issue that needs to be resolved. As it is currently handled, it is not interesting. I saw your MR @giero, the problem is that we will have to install I could be wrong @giero 😅. Let me know if I'm confused about anything. PRs are always welcome 🎉. |
Well, I think the tradeoff is worth it. twMerge size is 21.1kB (gzipped 6.7kB), not too big in my opinion (bundlephobia), but I'm still looking for another solution just in case :) |
…ccept functions (onesine#64)
PR #79 using string <Datepicker
inputClassName="dark:bg-white"
/> using functions import { twMerge } from "tailwind-merge";
...
<Datepicker
inputClassName={twMerge('dark:bg-white', 'text-2xl')}
/> assuming you have custom <Datepicker
inputClassName={classNames('dark:bg-white', 'dark:text-gray-900')}
/> |
I don't think this it will resolve anything. For example <Datepicker
inputClassName={twMerge('dark:bg-white', 'text-2xl')}
/> this will just generate string and it will be still concatenated to existing className like here https://github.com/onesine/react-tailwindcss-datepicker/blob/master/src/components/Input.tsx#L63 This should work like this: <Datepicker
inputClassName={(predefinedInputClassName) => twMerge(predefinedInputClassName, 'dark:bg-white', 'dark:text-gray-900')}
/> I closed #68 because you gave me an idea how to do this different way. I will provide another PR :) btw @JefteCaro you left |
… functions to override component className (onesine#64)
What about if we pass classes into inputClassName, to not use the default ones? Makes more sense to customize the input as we want. No extra lib, just what the user wants. |
That makes sense - DatePicker would have its own default classes but they could be overwritten entirely by dedicated class names - not individually or partially. This will solve the problem with merging classes. |
… functions to override component className (onesine#64)
This has now broken things on our side. How does one do this now ?
|
You can still do this, but using inputClassName={(className) => `${className} font-medium text-gray-600`)} But this may not work as intended - that's why I use https://www.npmjs.com/package/tailwind-merge for this, and then inputClassName={(className) => twMerge(className, "font-medium text-gray-600")} |
ah perfecto! I missed the part where the existing classNames were exposed. |
I'm using the latest version of the tool, with react 18.2, I'm not sure what would cause this.
My config file looks correct to me.
Happy to provide more info, just not sure what else to give right now.
The text was updated successfully, but these errors were encountered: