How to create a custom component that's styled in tailwind and usable in astro frontend?

[simkimsia]

I have read this https://google.github.io/mesop/web_components/quickstart/

I am a bit unsure how to create a Button component for form submission that's styled in tailwind and usable in an Astro frontend.

I am more of a python person so I'm very motivated to figure this out.

Going forward I intend to include libraries like react-flow so I lean towards building custom components that can use react libraries and can interact with other react components

I am thinking of using this https://github.com/google/mesop/tree/main/mesop/examples/web_component/quickstart or https://github.com/google/mesop/tree/main/mesop/components/button as the structure and replace the code to reflect the above scenario

[wwwillchen]

For tailwind, we don't support this right now, see #438.

Can you tell me more about why you're trying to integrate Mesop with Astro? I'm not super familiar with Astro, but I think typically you use it with other JS frameworks like React, so I'm not sure how you would integrate Mesop with Astro.

You should be able to use React components by wrapping it as a web component. Let us know if you run into issues, thanks.

[simkimsia]

You should be able to use React components by wrapping it as a web component. Let us know if you run into issues, thanks.

How about using mesop but use it to transpile into UI components of targeted frameworks (such as react, astro) as js files?

I know it's beyond the original goals of the project, but I am wondering out loud how hard/easy that would be to tweak the code towards this, even if I have to fork the project separately.

For e.g. can i use protobuf to transpile the python defined component instances into react component files?

[wwwillchen]

It's an interesting idea, but I think it'll be quite difficult due to the architecture of Mesop. Every user interaction requires a network round trip so that the Python code can update the state and re-render the components.

Essentially, if you wanted to serialize the component tree into protos and load it into React components, I think it's theoretically do-able, but handling subsequent user interactions would be quite difficult, and this would basically be a different UI framework (i.e. a fork).

Can you tell me more about why you're trying to do this? Is it to avoid having a server?

[simkimsia]

Can you tell me more about why you're trying to do this? Is it to avoid having a server?

Thank you for showing curiosity and empathy towards me. 😄

In your goals the one that resonates with me the strongest, is the one about prioritizing python developer experience and that primary goal leading to UI-as-code as secondary goal.

For reusability in both web app and desktop app for the same project, I have chosen to use Astro as frontend though I am not good at it.

My backend for web app is Django
My backend for the desktop app is Tauri.

I can get this stack working. But I haven't quite figured out how to create modular components in the frontend.

I can hire people to help me create Astro/react components, but when it comes to piecing them together, I have to do it myself.

Hence the appeal of Mesop as it allows me to piece UI components using Python.

Which is why I asked about the possibility of using/tweaking Mesop somehow to transpile the UI-as-python-code into actual Astro/react code.

Again, I know this is beyond the goals of the project, but I am open to your thoughts regarding my own goals.

[wwwillchen]

I think transpiling is going to be quite difficult. I'd recommend looking at another framework, perhaps Reflex which compiles down into React.

[lianggecm]

For tailwind, we don't support this right now, see #438.

Can you tell me more about why you're trying to integrate Mesop with Astro? I'm not super familiar with Astro, but I think typically you use it with other JS frameworks like React, so I'm not sure how you would integrate Mesop with Astro.

You should be able to use React components by wrapping it as a web component. Let us know if you run into issues, thanks.

Any guidance on how to wrap React components. I'm interested in using Graphic Walker.