Thanks @Marc for the showcase. I have been using TailwindCSS together with ReactiveHTML to build a web app at work for geoscience data analysis and it works great.
Using a local tailwind config file and the JIT mode from tailwind can also output a very lightweight CSS file by automatically only include the css classes actually used in your Panel app.
Thanks for sharing. Would it be possible to share a screenshot? And describe in more detail how to output a very lightweight css file? And maybe even the source code?
I cannot share the code unfortunately but I will use your example and setup tailwind as I did in my project. As I have some deadlines to meet for the next two days, I will try to properly answer you by the end of this week.
Please find below a repo with a similar tailwind setup as I am using for my project:
Right now there is an outage on PyPi and I could not install the python requirement using poetry. However the code should work once installed.
You can have a look at the src/dist.css file to see that only the soft reset (or preflight in tailwindcss wording) and the classes used in the app are being outputted. This is faster than using the tailwind cdn which uses the same approach and the JIT mode that only includes the class you use.
I hope it helps. Let me know if you need more info.
This is great @Julien . Did you get this to work with more complex things? I tried extending it with popovers/popups but the component would not render correctly (even after yarn css) or would not react to the clicks.
Also, it seems that the libs/notifications/notifications.css file is missing, not sure what the purpose is?
That is awesome @Marc!.
In general it seems that when things don’t work as they would when copy-pasting examples from such frameworks into a standalone HTML it is generally because one needs to inject some extra javascript in the render of after_layout functions. Do you have a general thought/debugging process when trying to get these to work?
With Panel 1.x the html _template of ReactiveHTML is inside shadowroot. It means HTML/ JS examples do not always work out of the box.
Create simple `.py´ with ReactiveHTML element
panel serve it with --autoreload
Start from very simple code. If you experience issues reduce to very simple code.
Monitor the console in the browser. It can be shown by right-clicking in the browser and selecting Inspect.
If HTML/ JS example does not work out of the box. Try to see how they use the js framework in React, Angular, Web components or similar for inspiration.
Use the HoloViz discourse when you run into issues.
When ever you get something working please share as showcase because it helps build the knowledgebase.
If you experience bugs please report them on github. It helps mature the framework.