Tree-shaking Tailwind / Swap it out entirely, since it takes 60% of the time in a near-empty page

[evnchn]

Apparently, the selling point of Tailwind CSS was that it can tree-shake and be minimal.

It’s tiny — never ship unused CSS again (https://v3.tailwindcss.com/)

NiceGUI doesn't do that, and so the profiling looks like this 🤮:

(visiting /other_page in docs: a page with just a label)

So Tailwind takes up 2260ms in a page which totals to 3855ms, contributing to 60% of the load time!

---

If we can make Tailwind more light and fast, then we can make NiceGUI faster as a direct result.

I know you can disable tailwind by tailwind=False in ui.run, but making things all ugly isn't the way to go IMO.

Currently considering:

• Getting Tailwind JIT engine to run
• UnoCSS with Wind3 preset for Tailwind3 compatibility
• PicoCSS
• https://github.com/troxler/awesome-css-frameworks

[evnchn]

My approach to an attempt to getting Tailwind JIT engine to run can be summarized as:

1. Setup project structure

2. Get a string of all the classes

3. Populate index.html with all the classes that is used.

4. Out comes output.css with what we want! 11KB only, compared to 366KB tailwindcss.min.js

[falkoschindler]

Some random thoughts:

Even though "never ship unused CSS again" is a good objective for "normal" websites, it seems impossible with NiceGUI. The server can't know which classes will be used, e.g. by dynamically adding elements or even constructing class names on the fly. Therefore I don't see how we can ship less Tailwind without cutting functionality.

And you have to distinguish between 366KB, that are loaded once, can be cached and don't need to be loaded "ever" again, and 11KB which will be - as far as I understand - created dynamically and need to be shipped on every page load.

[evnchn]

Sorry but I very much disagree.

seems impossible with NiceGUI to "never ship unused CSS again" because we don't know what classes will be used.

1. You can get the user to declare ahead-of-time what classes they are about to use:

@ui.page('/', tailwind_jit=True)
def main_page():
    ui.label().classes('hidden font-bold') # declares that I want to use `font-bold` later
    ui.button('Surprise bold label', on_click=lambda: ui.label('Surprise!').classes('font-bold')

2. We can run the Tailwind JIT engine again and update the newest set of styles. Preferably if we can diff the CSS to minimize transmissions
3. We can order the browser to load the Tailwind CDN JS in the background (and maybe we need to remove the JIT-generated CSS to avoid conflicts) but that would restore full arbitrary CSS support

366KB cached and 11KB dynamic

1. It's 366KB of JavaScript code versus 11KB of CSS definitions
2. The 366KB of JavaScript code has some complex call stack, and takes up 60% of the CPU time in the JavaScript engine, blocking other JS execution. Not only will the CSS straightforward to parse and thus will take less time, modern browsers are probably smart enough to handle it in parallel with JS execution.
3. Assuming we do the Tailwind CSS JIT per-page, note how we cannot inline the JavaScript since it's so long, but we could probably get away with inlining the Tailwind CSS since it's so small (concept of critical CSS) and it changes with different pages having different CSS classes
4. If we can capture all classes used across the entire NiceGUI application, then even better, we can serve one 11KB CSS file which is cached across the site.

[evnchn]

Results are in!

Test code:

from nicegui import ui

ui.label('Hello, NiceGUI!').classes('text-2xl text-blue-500')

ui.run(tailwind=True) # Overriden False: Tailwind JIT instead of full Tailwind CDN JS

Without Tailwind JIT:

Scripting: 2415ms

With Tailwind JIT:

Scripting: 672ms

So the new loading time is only 25% of original. In other words, that's 4 times faster! 🚀

[evnchn]

#4806