This is not the fixed I hoped for, but the JS generates so many empty `<span>` tags that I cannot get rid of, that it is not possible to style this "from the outside", which is unfortunate.
Remove Tailwind Compatibility Mode and PostCSS. Install newest tailwind and configure it to use JIT-Mode. Setup npm run scripts to run TailwindCSS CLI and Parcel in parallel. The Tailwind index.css and all .html/.ts files are scanned live and generated to /css/index-tailwind-output which is in turn included in index.html.
- remove custom styles
- add new button styles based on Tailwind classes using @apply
- extend config to allow hover:ring-blue-200 and such
- update the js-files to use new classes
- Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
This fixes the styling but breaks the click action. Clicking on the text itself also triggers the action, clicking on the blank sapce next to it changes the label but does not trigger the action.
Generally speaking the style is easier to apply to an element that wraps the in put and the label-text. This could be the label-tag or a different wrapper.
- migrate featureinfobox to Tailwind
- migrate featureinfobox-content to Tailwind
- migrate fullscreenmessage-content to Tailwind so we can delete css/fullscreenmessagebox.css
The landscape-mode is somethign that Tailwind does not support AFAIK. Instead, I migrated the one css-definition that was left over but required to a tailwind-like class name `.landscape\:max-h-screen`. Note the escaped colon with is required so css supports colon based class names.
This changes the layout slighly. The image has a sharp edge to the right, which works very well IMO. We would also add custom tailwind border classes if needed.
