Added TailwindCSS library

[Klakurka]

Related to #524

Description

Introduces TailwindCSS, including 1 migration (Button.tsx) - with the eventual goal of completely migrating away from Material UI.

Test plan

Make sure nothing major is broken - pay close attention to the Button.tsx changes as there are definitely some things that need to be fixed up. Have a look at the demo/index.html page to see some styling regressions (eg. when the text has to go to 2 lines due to being too long).

Remarks

v3.4 was chosen because v4.x apparently doesn't work as well with microbundle and might be better at least until we've completely migrated away from Material UI.

[johnkuney]

I tried adding a test div with some tailwind classes and the styles did not come through.
Just added it in the widget component and did yarn build (in react dir) and then yarn dev (in paybutton dir)

Messed with it for a bit to try to get it to work but was not able to get any tailwind styles to come through

[johnkuney]

I was only able to get the tailwind styles (of a test div) to work in the demo if I add an import tailwinds.css in the index.html. Is that the expected behavior?

I dont quite follow the tailwind.md....or the commands arent working for me. Should npm run build (in react) and then npm run dev (in paybutton) make any tailwinds styles added to components work in the demo? or does it need the npm run watch:tailwind also? I tried them all I believe

[Klakurka]

OK - ready again for testing.

Button.tsx was mostly migrated over which you can use as an example.

[johnkuney]

I still don't think the tailwind styles are actually coming through. It looks like only the inline styles are getting applied, probably because they are not defined by tailwind utility classes. Those values are actual hard coded css string properties.

If you inspect a button you can see the baseClasses classnames are on the element, but the actual css is not there. For example it does not have display: inline-flex applied.

I also tried adding some more tailwind styles to the button container div and they did not come through.

I'm also seeing some weirdness with the button height / text. If the text is too long its overflowing the button.

Sorry to say we may want to step back from this one and consider if its worth it. My initial reaction was its better because I like tailwinds, but really a lot of the styles are applied outside the markup anyway (through functions and makeStyles) and not sure we gain much from using utility classes for the values vs just the actual string values we want.

We can still migrate away MUI, would just need to replicate any of the elements with regular html and css...

[Klakurka]

We do have higher prio things to worry about - will come back to this another time.