Boys, use Twind.
はじめに
皆さんはWebサイトをどうやってスタイリングしているだろうか。
多くの人はCSSを使っているだろう。
また、他の人もSCSSやSASSなどを使っている人が多いのではないだろうか。
また、最近ではTailwindCSSがかなり流行っている。
これはクラスを適用するだけでスタイリングできるスグレモノで、自分も使っていた。
今回はそのTailwindCSSに取って代わるライブラリ、Twindについての話である。
TailwindCSSの欠点
TailwindCSSには大きな欠点がある。
それは、ファイルサイズだ。
最近はアップデートごとに肥大化してきており、最新版では 141.7kb ものサイズがある。
ここまで大きいと、サイトのパフォーマンスなどにもダイレクトに影響してくるものである。
また、最近ではJITなどの機能もついてきているが、これはこれで設定が面倒である。
また、そのようなことからDenoなどの新しい技術でも利用が難しいことも難点である。
そこで、本家以上のパフォーマンスを持ち、軽量のライブラリが登場した。
Twindとは何か
Twindは、TailwindCSSの代替ライブラリである。(Twind v1ではTailwindCSSの完全サポートもしている模様)
ライブラリ本体も軽量で、 8.9kb という驚異的な軽さである。
だが、Twindの凄さはこれだけではない。
Twindのすごいところ
Twindはコンパイラ
TailwindCSSはCSSファイルを読み込む形式が一般的であるが、Twindはコンパイラである。
つまり、自分の使ったtext-blue-500やbg-blackなどのユーティリティのみをCSSにコンパイルするというライブラリである。
これの何が良いのかと言うと、ある程度JavaScriptで変換をするため、そもそもライブラリが軽量になり、またSSR(Server-side Rendering)などの仕組みを作るときには、コンパイルしたCSSをクライアントに送信するだけなので、ゼロランタイムを実現することができる。
フレームワークに依存しない
TwindはHTMLファイルでもShimを使うことで利用可能である。
もちろんランタイムも軽量なため、実用可能なレベルのアプリも作成可能である。
Tailwind v3と同等の機能
Twind v1ではTailwind v3と全く同じ機能を提供している。
軽量なため、こちらを使うのが一番である。
実際に利用してみる
Shimを利用して使ってみよう。
どうだろうか。コードはかなり簡単になったはずだ。
細かい部分をCSSに任せるのはアリだが、Twindをぜひ使ってはいかがだろうか。
おわりに
現在FreshにもTwind v1がマージされようとしている。
これからはTailwindCSSよりTwindのほうが本格的になっていくであろう。
ということでTwindを使ってスタイリングしてみませんか？という話でした。
もし良ければハートもお願いします。
Discussion