Can't apply TailwindCSS classes forcefully in NiceGUI 3.0.0rc1

[python-and-novella]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import ui

def index():
    ui.button('button').props('color="red-10"')
    # apply TailWindCSS color forcely
    ui.button('button').classes('!bg-red-700')

index()

ui.run(native=True)

Description

In NiceGUI 3.0.0rc1,I can't apply TailWindCSS color forcely.
Does it works as expected?

NiceGUI Version

3.0.0rc1

Python Version

Python 3.12.10

Browser

Other

Operating System

Windows

Additional Context

It shows this:

But in Nicegui 2.24.1, it shows this:

[python-and-novella]

I got it!
Because of The order of precedence among important rules is the inverse of normal rules. :
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#layer_order_and_the_!important_flag

[python-and-novella]

I solved it:

from nicegui import ui

def index():
    ui.button('button').props('color="red-10"')
    # apply TailWindCSS color forcely
    ui.button('button').props('color text-color').classes('!bg-red-700')

index()

ui.run(native=True)

[evnchn]

We may need to document this as a breaking change due to how Tailwind and Quasar works, and offer migration guidelines.

[python-and-novella]

Yes, indeed.
It cost me a lot.
In 3.0.0, @layer of CSS make the tailwindcss can't overlay the quasar's color.

[falkoschindler]

This looks pretty critical to me. A workaround might not always be so easy to find. Consider scenarios like #5136 or the following example:

dark = ui.dark_mode()
ui.switch().bind_value(dark, 'value')
ui.label('Hi!').classes('invisible dark:!visible')

The "important" prefix ! is required to overwrite the "invisible" class in dark mode. This works in NiceGUI 2.x, but not in 3.0.0rc1.

[evnchn]

A potential solution would be to put the utilities layer (the Tailwind CSS layer) actually below the quasar layer, such that when you use Tailwind ! the inverse of layer order would let Tailwind win.

I think this would be more inline with 2.x behaviour since by-default I think Tailwind loses to Quasar unless with !

[evnchn]

Test code:

from nicegui import ui


@ui.page('/')
def index():
    ui.label('If it is green, Tailwind is winning over Quasar')

    ui.label('Quasar Red, Tailwind (no important) Green')
    ui.button('button').props('color="red-10"').classes('bg-green-700')

    ui.label('Quasar Red, Tailwind (with important) Green')
    ui.button('button').props('color="red-10"').classes('!bg-green-700')


ui.run(show=False, port=9999)

2.x:

3.0 with @layer theme, base, quasar, nicegui, components, utilities, overrides; (default layer ordering)

3.0 with @layer theme, base, utilities, quasar, nicegui, components, overrides; (modified layer ordering)

The modified layer ordering just "makes more sense" given that Quasar already uses a lot of !important within itself, and our chance to win is to have a less-important layer such that when we !important we win.