Variantsによるスタイリングをしようという内容です。CSSは書きやすいですし、かなり使い心地がいいですが、ある点についてのみ圧倒的な短所があります。それが「クラス名長すぎ問題」です。私はよく以下のようなことを感じたりします。CSSを使った人がある方なら一度は思ったことあるのではないでしょうか。Variantsです。Variantsの定義です。CSSに輸入したライブラリです。Stitchesでは以下のようにstyled()を使用してvariantsを追加できます。CSS製にしたライブラリということです。button</Button>https://stitches.dev/これまたドキュメントからですが、以下のような特徴があるようです。compositionなどの豊富な機能TypeScriptにより完全に型付けされている特定のフレームワークに依存しないユーティリティ性それでは実際の実装を見て、利点を感じてみましょう。Variantsを導入しましょう。CSSがインストールされいる必要があります。CSSをインストールしてください。Variantsをインストールしましょう。tailwind-variantshttps://www.tailwind-variants.org/docs/getting-startedインストールができたら、早速、実装してみましょう。以下は、ドキュメントのIntroductionにあるbuttonをコンポーネント化したものです。)}基本的には、tv()を使用してクラス名を作成していきます。それぞれのプロパティは以下のように機能します。引数に指定がない場合に適用されるスタイル基本的には上記のようにクラス名を生成し、JSXで各タグのclassNameで呼び出して使います。基本の実装だけでも、JSXが汚れていないのがわかりますし、スタイルが宣言的なので、コードの見通しがよく、一目でどんなスタイルが当てられるかがわかると思います。propsでスタイルを当てる場合ただ、基本の使い方だと、コンポーネントを親コンポーネントで呼び出したい場合、柔軟性に欠けます。Variantsはそのあたりもカバーしており、variantsをpropsとして渡すための型(VariantProps)も提供してくれます。)}上記のようにButtonコンポーネントのpropsに型付けすることで、親コンポーネントでpropsによるスタイルのしても可能となります。型付けされているので、親コンポーネントでpropsの値を指定する際に補完が効きますし、カーソルホバーすれば、どのような型が適用されているかもわかります。Homeレスポンシブ対応さらにレスポンシブにスタイルを適用することもできます。https://www.tailwind-variants.org/docs/introduction#responsive-variants以下のようにresponsiveVariantsを定義することで、画面サイズに合わせて、適用させるスタイルを変更することができます。注意点として、公式ドキュメントではxsから指定がありますが、initialがxsから考えるため、xsは不要です。)}ただし、responsiveVariantsを使用する際は、tailwind.config.tsでwithTV()を使用する必要があります。withTV(config)この設定を加えることでresponsiveVariantsを使用することができます。CSSのようにbaseやVariantsにsm:text-smやxl:text-lgなども適用できるので、可読性を考慮してみた結果であったり、実装要件に合わせて使いわけることが可能です。通常のプロジェクトでは、1つ1つ定数としてtv()を設定するのは、かなり手間です。Variantsはそれも補う機能があり、その機能がslotsです。https://www.tailwind-variants.org/docs/introduction#split-components-into-multiple-slotsslotsでの実装はtv()で定義することは変わらず、プロパティとしてslotsを定義し、slots内にbaseはwrapperなど任意のプロパティ名を定義して、各種スタイルを記述します。あとは、分割代入でcard()のslotsのプロパティを宣言し、スタイルを当てたいコンポーネントのclassNameに適用させていきます。Variantsのスタイルを上書き実装をしていると、「この部分だけ、別のスタイルを当てて上書きしたい」なんていう場面が結構あります。VariantsのOverrides機能で対応できます。https://www.tailwind-variants.org/docs/introduction#overrides例えば、以下のケースだと、「このボタンだけ少し大きくしたい」というケースに対応しています。)}overridesではbutton()の引数にオブジェクトでclassかclassNameを渡すことでスタイルの上書きが可能です。px-4に上書きしています。スタイルを引き継いで上書きoverridesと似ていますが、以下のようなケースに対応できます。「ボタンが2つあり、1つ目のボタンと基本は同じスタイルだけど、一部分だけ違うスタイルを当てたい。overridesのようにJSX内での呼び出しでなく、tv()の宣言で実装したい」そのような場合には、extendsを使用します。)}上記のようにすることでbaseButtonを引き継いでのスタイリングができます。公式ドキュメントでは配列でスタイルを定義していますが、文字列でも配列でもどちらでも指定可能です。slotsという機能について解説します。Slotsの機能を使ってみよう実践編では簡易的なヘッダーのコンポーネントを使用して解説します。slotsという機能について解説します。slots復習になりますが、slotsは複数のコンポーネントに対するスタイルを定義できるものでしたよね?そのため、複数のslotsを定義していると、「この2つのslotsには同じスタイルを定義したい」という場面に遭遇すると思います。slotsという機能です。https://www.tailwind-variants.org/docs/slots#compound-slotsこれを使用することで、一度に複数のslotsにスタイルを適用できるので、一つ一つのslotsに対して同じスタイルの記述をしなくて済みます。私の実装と公式の例を合わせてみると、より理解できると思います。px-4というスタイルを定義しています。compoundSlotsは配列で定義するため、重複するスタイルがある場合、次々に定義することができます。以下のようにすることができます。},],この場合、logo・singUp・signInには、それぞれ以下のスタイルが適用されます。slotsを使うことで記述の冗長性を防ぐことができたり、リファクタリングがしやすくなります。SlotsとVariantsの組み合わせ最後に、この記事で最も実践的な内容になると思われる実装を記述します。それがSlotsとVariantsを組み合わせたスタイリングの定義になります。https://www.tailwind-variants.org/docs/slots#slots-with-variants公式ドキュメントはuseStateなどを用いた例を実装しており、こちらのほうが、より実践的ですが、少し複雑なため、私の方は簡素化して紹介できればと思います。Variantsの定義内容を解説します。各slotsの定義の部分は簡単ですよね。次にvariantsの部分ですが、それぞれ順に見ていきましょう。typeにfluidが指定されていれば、slotsのcontainerのmax-w-3xlがmax-w-fullに上書きされます。その他も同様の方法でネストを追っていくと、どんなスタイルが当てられるかがわかります。hiddenでは、trueの際にactionsがhiddenになり、falseではflexとなります。レスポンシブ対応されているので、実装部分も見ると画面幅が小さいときにhidden.trueのスタイルが当てられることがわかります。colorも同様に、primaryとsecondaryという値によってsignUp・signInに当てられるスタイルが変わるということがわかります。これを親で以下のように呼び出すと、props.colorにはsecondaryが指定されているため、signUp・signInにはcolor.secondaryのスタイルが当てられます。props.typeはundefinedとなるので、containerはmax-w-3xlのままでmax-w-fullに上書きされません。Homeこのようにslotsを使いこなすことができれば、複雑なスタイルも宣言的に定義することができ、JSXをきれいに保つことがでるため、コンポーネントのロジックやStateなどの状態が負いやすくなります。CSSのクラスも宣言的な実装になるため、何にどのスタイルが当たっているかをtvを見るだけでわかるようになります。Variantsの大体の機能の解説はできたかなと思います。解説していない機能も少なからずありますので、全てを知りたい方は公式ドキュメントを読んでみてください。おわりに非常に便利なライブラリだと思っていただけたのではないでしょうか。保守性が上がるレスポンシブ対応も簡単Stateなどとの組み合わせても可読性がそこまで落ちないそれ以外にもメリットは個人個人で感じたものがあるかと思います。CSSを導入しない・できない理由はクラス名が長くなるからの一点の短所がかなり大きい理由可と思っているので、それを補えるライブラリを使うことができれば、個人開発だけでなく、企業のプロジェクトにも導入のハードルを下げることができるのではないかと思ってもいます。最後までお読みいただき、ありがとうございました!参考文献https://www.tailwind-variants.org/https://www.tailwind-variants.org/docs/https://stitches.dev/https://tailwindcss.com/docs/installationhttps://zenn.dev/yend724/articles/20230603-wgnqrgmj8kymzpev#tailwind-variantsとはkaitoWebエンジニアです。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionkaitoWebエンジニアです。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。