Un résultat CSS plus rapide et plus léger que tailwindcss

Je partage les résultats d’un benchmark réalisé sur Devup UI et d’autres bibliothèques !

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

Le benchmark a été réalisé avec le même code pour tous (dans certains cas, le code est même plus favorable à d’autres bibliothèques, et tout le code de test est disponible en open source !). Dans toutes les situations, en prenant comme référence la génération de CSS selon la même méthode que tailwind, qui arrive en tête en vitesse (single css), le résultat de build obtenu est le plus léger.

Merci pour votre intérêt !

[tjddnjsjo]

D’après une présentation que j’avais vue lors d’une conférence front-end, j’ai eu l’impression que l’approche de son fonctionnement interne était similaire à celle de Tailwind, et à part des différences dans la manière d’écrire, je n’ai pas vraiment trouvé d’élément particulièrement avantageux.
Tailwind inclut sans doute CSS Normalize ; je me demande si devup-ui est dans les mêmes conditions.

[owjs3901]

Cela peut être mis en œuvre via @devup-ui/reset-css.
Le plus grand avantage est qu’il est possible de migrer facilement depuis les solutions CSS-in-JS existantes, et que le résultat CSS est plus léger que celui de Tailwind ; le CSS Treeshake semble également être un atout majeur.

Ensuite, contrairement à Tailwind, nous avons également mis à jour une fonctionnalité permettant de générer le CSS pour chaque fichier afin de splitter les chunks, et nous nous différencierons davantage avec encore plus de mises à jour.

Merci.