How to work with tailwind classes?

[PawelRoman]

I'm trying to make a simple div with 2 column divs inside, first with 1/4 and the second with 3/4 width.

I tried the flex basis syntax like this. This is literally the very basic example from tailwind doc https://tailwindcss.com/docs/flex-basis#setting-the-flex-basis:

with ui.row().classes("flex flex-row"):
    with ui.column().classes("basis-1/4"):
        ui.label("1/4 col")
    with ui.column().classes("basis-3/4"):
        ui.label("3/4 col")

But it doesn't work, the second column renders below the first one. I also tried w-1/4 in place of basis-1/4, tried adding w-full on the parent container, and few other things but none of this is working.

Am I missing something? Do I need to initialize something or add some parent container, for those classes to work correctly?

[falkoschindler]

Hi @PawelRoman,

You can add wrap=False to prevent the ui.row element from wrapping:

with ui.row(wrap=False).classes("flex flex-row"):
    with ui.column().classes("basis-1/4 border"):
        ui.label("1/4 col")
    with ui.column().classes("basis-3/4 border"):
        ui.label("3/4 col")

The difference to a plain Tailwind example might come from ui.row's default layout, which uses Quasar's "row" class to create a flex layout. While CSS's flexboxes don't wrap by default, Quasar's "row" does. That's why we introduced the wrap parameter.

[PawelRoman]

Wow... it worked. But it's rather confusing. Are there other flags like the wrap flag? And why isn't wrap flag False by default? Would it break something? If yes, what's the basic example on how to get this 1/4 and 3/4 cols working with wrap=True?

I also noticed another thing. It actually requires adding w-full class (in addition to wrap=False). Without w-full, the cols render horizontally as expected but their width behave as if it was "auto" - they don't stretch to 1/4 and 3/4 of the screen (again, w-full is not present in the basic tailwind examples)

[falkoschindler]

Are there other flags like the wrap flag?

No, as shown in the documentation, there is currently no other parameter besides wrap.

And why isn't wrap flag False by default?

By default wrap is True, because that's how Quasar works and many NiceGUI elements are based on Quasar. We could have decided differently, but it's kind of 50:50. Some users that are used to Tailwind would expect it to be False, but in the Quasar world it's the opposite. And to be honest: Once we noticed this difference between Tailwind and Quasar, ui.row was already well established and changing the default behavior would have introduced a major breaking change.

If yes, what's the basic example on how to get this 1/4 and 3/4 cols working with wrap=True?

I'm not sure what you mean. The code from your original post is the example with 1/4 and 3/4 columns with wrap=True. But note that the row only wraps because there is a gap in addition to the size of the children. Removing the gap removes the need to wrap:

with ui.row().classes("flex flex-row gap-0"):
    with ui.column().classes("basis-1/4 bg-red-100"):
        ui.label("1/4 col")
    with ui.column().classes("basis-3/4 bg-blue-100"):
        ui.label("3/4 col")

[PawelRoman]

Actual answer requires w-full in addition to wrap=False.

with ui.row(wrap=False).classes("flex flex-row w-full"):
    with ui.column().classes("basis-1/4"):
        ui.label("01")
    with ui.column().classes("basis-3/4"):
        ui.label("02")