Olyx UI
Olyx UIはBase UIをベースにHCTカラーシステム等を使ってデザインされたオープンソースのReactコンポーネントライブラリです。
Tailwindは採用せずネイティブCSSで書かれており、HCTカラーシステムを採用、コピペで利用可能、カスタムデータ属性を利用してCSSクラスのコンフリクトを回避しています。
たとえば以下のようなシンプルで明瞭なコードで書けますし、class属性で制御しないのでコンフリクトもまず起きません。
<Button data-mode="filled" data-ui="button"> Click me </Button>
[data-ui="button"][data-mode="filled"] {
background-color: var(--color-button);
color: var(--color-on-button);
}
同じフレームワークを使えば同じようなWebページが量産されるのは過去にも幾度となくありましたが、今はどこもかしこもTailwindやshadcn/uiとなっており、うんざりしている方も少なく無いかもしれませんが、Olyx UIの開発者もその1人のようで、このような脱Tailwindが出来るフレームワークをデザインしているみたいです。
特に難しい設定なども無いので気軽に試せるのも良いですね。詳細は以下にて。
