nextjsのプロジェクトでclass-variance-authorityを採用した

レビューは勉強になる 最近案件が立て込んでいるのは6月のまとめに書いたんだけど、結果いくつかのプロジェクトで実装ではなく、ただのレビューアーと化している。 実装がしたいって今まで強く思っていた。 実装が実力を伸ばす唯一の手段だと思っていたけど、レビューも真剣にやればすごい勉強になることに気が付いた。 というのもレビューするには、まずコードをしっかり読まなければならないし、知らないプラグインとの出会いがあり、それを調べることで相当勉強になる。 で、今回出会ったのが、class-variance-authorityというプラグイン。 class-variance-authorityとは?? 簡単に言うとvariantsを定義して条件分岐をわかりやすくするもの。 公式にあるbuttonコンポーネントの例がわかりやすい。 https://github.com/joe-bell/cva/blob/main/examples/react-with-tailwindcss/src/components/button/button.tsx 今まで自分が実装したときはjsxのほうに条件をいろいろ書いてコードが読みにくくなっていたけど、これならコードが整理されてわかりやすい。 懸念点があった 懸念点はprettierが効くのか、そしてvscodeの拡張機能が正常に動くかという点だった。 でもそれも公式でしっかり解消されていた。 prettier tailwindのフォーマットが行われるようprettier-plugin-tailwindcssというプラグインを入れている。 prettier-plugin-tailwindcss で、これがvariantsに書くと効かないことが分かった。 https://github.com/tailwindlabs/tailwindcss/discussions/7558#discussioncomment-7345390 ここで議論されており、解決されていた。 この通り行った結果、うまく動いた。 Tailwind CSS IntelliSense これは自動でtailwindの補完、つまり予測を出してくれるvscodeの拡張機能。 これを効くようにするには、 という風に設定すればいい。で、再起動をする。 --- うん、勉強になった。