MicahZoltu
commented
1 year ago Consider styling with shadow DOMs if you have styles that are very narrowly targeted at specific components, that way you don't have to deal with a single giant monolithic stylesheet that can be confusing and hard to keep track of.
Create this component in the project somewhere: https://github.com/Zoltu/recoverable-wallet/blob/micah/ui/app/ts/library/Shadow.ts
And then use it like this: https://github.com/Zoltu/recoverable-wallet/blob/micah/ui/app/ts/components/AutosizingInput.tsx#L17-L18
If you take a look at https://github.com/Zoltu/recoverable-wallet/blob/micah/ui/app/css/autosizing-input.css you'll note that I don't use any class names, I just style by element type. I can do this because the styles inside the shadow DOM only affect elements within the same shadow DOM. In this case, that is a single input element, a label, and some spans.
Initial styling using tailwind gets out of hand after some playing around. These styles need to be moved to application layer outside of the utility ones as they usually target very specific and rarely reused cases. Will be listing lines in the code these occurrences are observed