TailwindCSS integration without React

Does anyone have any examples of implementing some of the GUI features using utility CSS frameworks?

I started with this example from the docs: Babylon.js Playground – however, in my application (not linked, too big to shoehorn into the playground) I can’t get Tailwind classes to actually modify this button. I am trying not to go full React as I don’t want to actually build my scenes/game using React.

If anyone has any examples that don’t require writing all the styles by hand and applying them with e.g button.style I’d greatly appreciate it. Thanks.

Hello @genuflect , how are you doing?

The GUI system in Babylon.js will not be affected by you page CSS. We do have a tool called GUI Editor that is aimed to help developers not having to write the GUI code by hand. You can use the tool to generate a JSON with all the GUI style and than import it directly into you project.

The GUI Editor | Babylon.js Documentation (babylonjs.com)

Let me know if this helps.

1 Like

Thanks @srzerbetto for this clarification as it was unclear to me previously. My biggest issue with the GUI editor is that there is apparently no undo function – I recognize it is in beta and still being worked on. Lack of undo led me to code my own GUI using what exists in the Babylon docs, but for now it is still quite verbose.

Regardless, thanks again for pointing this out and I’ll have to work out some way to arrive at the GUI I want.

1 Like