My pet project arewebro as useless as it was, deserved a little bit of extra love in terms of UI.

I noticed afterwards that the UI elements were annoyingly not centered in the frame I declared in Native mode.

Thanks to a Reddit post, I discovered that you can use a whole set of CSS properties inherited from Quasar and Tailwind. And indeed in the documentation you can read:

NiceGUI uses the Quasar Framework version 1.0 and hence has its full design power. Each NiceGUI element provides a props method whose content is passed to the Quasar component: Have a look at the Quasar documentation for all styling props. Props with a leading : can contain JavaScript expressions that are evaluated on the client. You can also apply Tailwind CSS utility classes with the classes method.

Since the UI is very simple, I just had to apply some extra properties to the parent element:

container = ui.column().classes('w-full items-center')

That tells the UI to:

• occupy the full width (Tailwind property)
• center all items below in the hierarchy (Quasar property)

Result: