Tailwind CSS IntelliSense で cva に補完を効かせる
Gaji-Labo はスタートアップのプロダクト開発支援を数多くやらせていただいておりますが、最近はコンポーネントライブラリとして shadcn/ui が選ばれることが増えてきました。
Tailwind CSS で作られた高いカスタマイズ性と柔軟性のあるUIコンポーネントはスタートアップのサービス立ち上げに非常に強力な選択肢となっています。
Gaji-Laboでは、ほとんどのメンバーが Tailwind CSS + VS Code の環境で開発しています。
そして、Tailwind CSS を VS Code で使うのに欠かせない拡張が Tailwind CSS IntelliSense です。
公式で開発されている VS Code 拡張で、強力な補完機能を提供してくれます。
cva 内で補完を使いたい
shadcn/ui では TailwindCSS の Variants の管理に cva(Class Variance Authority) が使われています。
Alert コンポーネントを参考にすると下記コードのような箇所です。
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
この cva の variants のスタイルを書く際にデフォルトでは補完が効かないので、このままではとても不便です。
こちらを設定ファイルにより保管を効かせます。
Tailwind Regex List
VS Codeの設定「Tailwind CSS › Experimental: Class Regex」にて正規表現で保管を効かせるClassを設定できます。
Tailwind Regex List という設定をまとめてくれている便利なサイト(リポジトリ)があるので、そちらを参考に下記の設定を settings.json に記入します。
"tailwindCSS.experimental.classRegex": [
["cva\(([^)]*)\)", "["'`]([^"'`]*).*?["'`]"]
]
# Take note of the outer square brackets!
設定をすることで、無事 cva内の variants でも補完が効くようになりました。
![](https://wp.gaji.jp/wp-content/uploads/2024/08/ScreenShot-2024-08-01-at-17.14.27-740x289.png)
Tailwind CSS は補完がないと正直書くのが面倒なので
Tailwind Regex Listを見ると、clsx や tailwind-variants などよく使われているものも対応できそうですので、環境が変わっても大体補完を追加することができそうです。
おわりに
Gaji-Labo はさまざまな技術スタックのフロントエンド開発や UI 改善に対応していますので、shadcn/ui や Tailwind CSS に限らず、プロダクト開発にお困りのスタートアップからのご相談は大歓迎です。
また、さまざまなチームや技術に触れながらスタートアップ支援をしてみたいというフロントエンドエンジニアがいれば、まずはカジュアルにお話する機会をいただければ嬉しいです。
Gaji-Laboでは、 Next.js 経験が豊富なフロントエンドエンジニアを募集しています
弊社では Next.js の知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違う Gaji-Labo を味わいに来ませんか?
Next.js の設計・実装を得意とするフロントエンドエンジニア募集要項
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!