TailwindCSS v4.x does not like NiceGUI v3.x Native mode with old macOS Monterey WebKit

[coolynx]

I upgraded to the latest NiceGUI v3.0.3 and got an error.

The expected output.

Here is the code.

from nicegui import app, ui

app.native.start_args['debug'] = True
with ui.column():
    for text in ['One', 'Two', 'Three', 'Four']:
        with ui.row().classes('odd:bg-red-300 even:bg-white'):
            ui.label(text)

ui.run(native=True, window_size=(200, 200), tailwind=True)

Yes, again - the issue with the same old macOS Monterey in Native mode that uses older version of WebKit. Safari works perfect.

macOS Monterey WebKit Version:

defaults read /System/Library/Frameworks/WebKit.framework/Versions/A/Resources/version.plist CFBundleVersion

17613.3.9.1.16

Safari Version:

defaults read /Applications/Safari.app/Contents/Info.plist CFBundleVersion

17618.3.11.11.7

This is not a NiceGUI bug, so I did not file it under the issues, but here.

A quick and dirty fix that I used in this example. Just got the latest v3 from https://cdn.tailwindcss.com/3.4.17 and copied over the provided lib/python3.13/site-packages/nicegui/static/tailwindcss.min.js. 🫣

[evnchn]

Hello @coolynx. Thanks for the fix.

But I think no need to "hack the NiceGUI library".

Consider tailwind=False in ui.run. Heck, for greater compatibility and performance you can do Tailwind V2. Check #4806 (comment) for a rough idea of what I did to squeeze performance.

[coolynx]

Plain TailwindCSS v2 does not work for me. SInce I have already apps running on NiceGUI v2.x, then the best way would be to go with this. This way CSS works the same and I have the latest NiceGUI v3.x.

# -*- coding: utf-8 -*-
from nicegui import app, ui

app.native.start_args['debug'] = True

ASSET_PATH = '/apps/demo/assets'  # Create a static file dir
app.add_static_files('/assets', ASSET_PATH)  # Link it to NiceGUI app

ui.add_head_html('<script defer src="/assets/tailwindcss.min.js"></script>', shared=True)  # Add a header

with ui.column():
    for text in ['One', 'Two', 'Three', 'Four']:
        with ui.row().classes('odd:bg-red-300 even:bg-white'):
            ui.label(text)

ui.run(native=True, window_size=(200, 200), tailwind=False)