cva

CSS-in-TS libraries such as Stitches(opens in a new tab) and Vanilla Extract(opens in a new tab) are fantastic options for building type-safe UI components; taking away all the worries of class names and StyleSheet composition.

…but CSS-in-TS (or CSS-in-JS) isn't for everyone.

You may need full control over your StyleSheet output. Your job might require you to use a framework such as Tailwind CSS. You might just prefer writing your own CSS.

Creating variants with the "traditional" CSS approach can become an arduous task; manually matching classes to props and manually adding types.

cva aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.

Stitches（新しいタブで開きます）やVanilla Extract（新しいタブで開きます）などのCSS-in-TSライブラリは、タイプセーフなUIコンポーネントを構築するための素晴らしい選択肢であり、クラス名やスタイルシートの構成に関するすべての心配を取り除くことができます。

しかし、CSS-in-TS（またはCSS-in-JS）は万人向けではありません。

スタイルシートの出力を完全に制御する必要がある場合もあります。仕事上、Tailwind CSS のようなフレームワークを使用する必要があるかもしれません。自分でCSSを書くのが好きな人もいるかもしれません。

伝統的な」CSS のアプローチでバリアントを作成すると、大変な作業になることがあります。

cvaはそのような苦痛を取り除き、UI開発のより楽しい側面に集中できるようにすることを目的としています。