Comments (13)
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 className
from the outside. The problem shows when a component has default tailwind classes and they need to be changed/modified. Many (next to each other) classes don't want to work as intended. Like here: https://github.com/onesine/react-tailwindcss-datepicker/blob/master/src/components/Input.tsx#L63
However, I found this article: https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3 and started using twMerge
- great library for merging tailwind classes :)
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).
from react-tailwindcss-datepicker.
This may help: #68 :)
from react-tailwindcss-datepicker.
PR #79
This should fix the issue without additional dependencies
into the package.
using string
<Datepicker
inputClassName="dark:bg-white"
/>
using functions twMerge
import { twMerge } from "tailwind-merge";
...
<Datepicker
inputClassName={twMerge('dark:bg-white', 'text-2xl')}
/>
assuming you have custom classNames
function
<Datepicker
inputClassName={classNames('dark:bg-white', 'dark:text-gray-900')}
/>
from react-tailwindcss-datepicker.
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
npm i https://github.com/giero/react-tailwindcss-datepicker.git
from react-tailwindcss-datepicker.
I only created this repo for pull request - you have to wait for merge to @onesine's project :)
from react-tailwindcss-datepicker.
Hi @nate-dash & @giero 👋
Thank you for using our package.
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 tailwind-merge
and I think that may increase the size of the library. If we can find a solution that does not affect the size of the package, that would be great. It would be nice not to have our users downloading a library that weighs a lot. A small size should be a strong point for react-tailwindcss-datepicker
.
I could be wrong @giero 😅. Let me know if I'm confused about anything.
PRs are always welcome 🎉.
from react-tailwindcss-datepicker.
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 :)
from react-tailwindcss-datepicker.
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 twMerge
in https://github.com/onesine/react-tailwindcss-datepicker/blob/master/pages/index.js :)
from react-tailwindcss-datepicker.
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.
from react-tailwindcss-datepicker.
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.
from react-tailwindcss-datepicker.
This has now broken things on our side.
We were using the "old behavior" to add existing classes to the pre-defined ones.
How does one do this now ?
inputClassName="font-medium text-gray-600"
from react-tailwindcss-datepicker.
You can still do this, but using inputClassName
as a function:
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")}
from react-tailwindcss-datepicker.
ah perfecto! I missed the part where the existing classNames were exposed.
from react-tailwindcss-datepicker.
Related Issues (20)
- Value not displaying HOT 2
- Editing value manually doesn't update widget if done at the start
- Missing comma in demo code
- Calendar not showing previous month when using different dayjs.locale()
- id attribute not passed on to underlying input
- custom classnames
- Feature Request: Can you add a time range, e.q. 08:00 - 14:00
- Masks
- Read-only mode not working
- State of the project HOT 1
- Modal is not adjusting according to height HOT 2
- Pop up is displayed below another component despite a higher z Index container
- Weird date selection behaviour in react tailwindcss datepicker
- Add shortcutClassName property HOT 1
- Hide/show year feature
- Selected date background is not showing. HOT 1
- fix for inside of accordion
- DatePicker won't reset on reset button press within an html form
- Support typical input field aspects such as tabIndex
- Add support for date localization
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tailwindcss-datepicker.