Schnellere und kleinere CSS-Build-Ergebnisse als mit tailwindcss

Ich teile die Ergebnisse eines Benchmarks mit Devup UI und anderen Bibliotheken!

Library Version Build Time Build Size
tailwindcss 4.1.13 20.22s 57,415,796 bytes
styleX 0.15.4 38.97s 76,257,820 bytes
vanilla-extract 1.17.4 20.09s 59,366,237 bytes
kuma-ui 1.5.9 21.61s 67,422,085 bytes
panda-css 1.3.1 22.01s 62,431,065 bytes
chakra-ui 3.27.0 29.99s 210,122,493 bytes
mui 7.3.2 22.21s 94,231,958 bytes
devup-ui(per-file css) 1.0.18 18.23s 57,440,953 bytes
devup-ui(single css) 1.0.18 18.35s 57,409,008 bytes

Der Benchmark wurde bei allen mit demselben Code durchgeführt (teilweise mit Code, der für andere Bibliotheken sogar günstiger ist; alle Test-Codes sind als Open Source verfügbar!). In allen Fällen zeigt das Build-Ergebnis, gemessen an der Erzeugung von CSS auf dieselbe Weise wie das schnellste tailwind (single css), die kleinste Dateigröße.

Wir freuen uns über viel Interesse!

[tjddnjsjo]

Nach dem Vortrag, den ich auf einer Frontend-Konferenz gehört habe, hatte ich den Eindruck, dass der Ansatz zu Tailwind und seiner internen Funktionsweise ähnlich ist, und abgesehen von Unterschieden in der Schreibweise konnte ich keine besonders überzeugenden Vorteile erkennen.
Tailwind enthält vermutlich CSS Normalize; mich würde interessieren, ob für devup-ui dieselbe Voraussetzung gilt.

[owjs3901]

Das lässt sich über @devup-ui/reset-css umsetzen.
Der größte Vorteil dürfte sein, dass sich bestehende CSS-in-JS-Lösungen leicht migrieren lassen, und außerdem ist das CSS-Ergebnis leichter als bei Tailwind; auch CSS-Treeshaking scheint ein großer Vorteil zu sein.

Anschließend haben wir im Unterschied zu Tailwind auch die Funktion aktualisiert, sodass für jede Datei CSS erzeugt wird und Chunks gesplittet werden können; durch weitere Updates werden wir uns noch stärker differenzieren.

Vielen Dank.