tailwindcssより高速で、より小さなCSS出力

 (github.com/dev-five-git)
3 ポイント 投稿者 owjs3901 2025-09-22 | 2件のコメント | WhatsAppで共有

Devup UI と他ライブラリを対象にベンチマークを行った結果を共有します！

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

すべて同じコード（一部は他ライブラリにより有利なコードです。すべてのテストコードはオープンソースで公開されています！）でベンチマークを実施しており、あらゆる状況で、速度1位の tailwind と同じ方式で CSS を生成した場合（single css）を基準に、最も小さいビルド成果物を示しています。

ぜひご注目ください！

関連記事

2件のコメント

 
tjddnjsjo 2025-09-26

フロントエンドカンファレンスで聞いた発表では、Tailwind と内部動作へのアプローチが似ていると感じましたし、書き方の違い以外には、そこまで大きなメリットを感じられる要素は見つけられなかったように思います。
Tailwind は CSS Normalize を含んでいるはずですが、devup-ui も同じ条件なのか気になります。
 
owjs3901 2025-09-30

@devup-ui/reset-css を通じて進めることができます。
最大の利点は、既存の CSS-in-JS ソリューションを簡単に移行できることと、Tailwind よりも軽量な CSS の出力結果、そして CSS Treeshake も大きな強みである点だと思います。

その後、Tailwind とは異なり、各ファイルごとに CSS が生成されるようにしてチャンクを split する機能もアップデートしました。今後もさらに多くのアップデートを通じて差別化していきます。

ありがとうございます。