Can I match the same breakpoints for Quasar and Tailwind?

[Anindya088]

Question

Hi All,

I am trying to make the design responsive by using the breakpoint classes, so ex: for small screen the text size might be reduced, some things might not be visible, etc.

My challenge is Quasar and TW has different definitions of the breakpoints. Is there a way I can edit them and make them the same? And also probably add a few more to make it more granular?

I saw in their docs, that they allow to change these things from their configuration files, like the TW is in tailwind.config.js and the Quasar is in quasar.variables.sass
But because I am using Python and NiceGUI, how do I access these files? Or how do I change these settings?

Quasar

Tailwind

Thanks a lot,
Anindya

[falkoschindler]

Hi @Anindya088, that's an interesting question.

NiceGUI comes with the ability to set the Quasar config via globals.quasar_config. So I though this might work:

from nicegui import globals

globals.quasar_config['screen'] = {
    'xs': 400,
    'sm': 600,
    'md': 800,
    'lg': 1000,
    'xl': 1200,
}
with ui.element().classes('row'):
    for i in range(12):
        ui.label(f'Column {i + 1}').classes('col-xs-12 col-sm-6 col-md-4')

But the breakpoints still seem to be the default 600px and 1024px. I'm not sure why.

And regarding TailwindCSS, I also don't know how to change these breakpoints.

Just for the record, you can use custom values for individual elements like this:

ui.label('This message is red at 500px screen width.').classes('min-[500px]:text-red-400')

[Anindya088]

Hi @falkoschindler ,

Thanks so much, this is very helpful, the custom values like 'min-[500px] I can use for formatting requirements.

One question though, because I am also trying to work on the layout based on screen sizes, basically hide some things when smaller screen sizes, how do I use the custom value together with visibility?

For ex: I tried this:

with ui.column():
    ui.label('This message is always on.')
    ui.label('This message is visible above 700px screen width.').classes('min-[700px]:visible hidden')
    ui.label('This message is always on.')

This does not work, meaning it always remain hidden. Instead of hidden, I tried invisible or collapse, then it works, but the problem is the space for the 2nd row is still taken up, just that it is blank now, so looks weird, like one row then some gap then another row.

What would be the right approach to set visibility based on the custom px values?

Thanks a lot,
Anindya

[falkoschindler]

With min-[700px]:visible hidden the element gets both classes "visible" and "hidden" above 700px, which is not what you want. Try the following instead:

ui.label('This message is visible above 700px screen width.').classes('max-[700px]:hidden')

[MuuXB]

In v1.4.9, How to set quasar_config ?

[falkoschindler]

Good question, @hopingpeople!
It's now in app.config.quasar_config.

[Anindya088]

Thanks a ton @falkoschindler . I was struggling with the visibility classes from both Quasar and TW, and could not figure this one thing, basically how to hide/unhide things based on specific screen sizes. This solves a lot of my problems 😄

Thanks a lot,
Anindya