Tailwind CSS IntelliSense で cva に補完を効かせる

2024.8.1

実践と知見

Gaji-Labo はスタートアップのプロダクト開発支援を数多くやらせていただいておりますが、最近はコンポーネントライブラリとして shadcn/ui が選ばれることが増えてきました。
Tailwind CSS で作られた高いカスタマイズ性と柔軟性のあるUIコンポーネントはスタートアップのサービス立ち上げに非常に強力な選択肢となっています。

Gaji-Laboでは、ほとんどのメンバーが Tailwind CSS + VS Code の環境で開発しています。
そして、Tailwind CSS を VS Code で使うのに欠かせない拡張が Tailwind CSS IntelliSense です。

公式で開発されている VS Code 拡張で、強力な補完機能を提供してくれます。

VSCode で Tailwind CSS のクラス名を自動補完する拡張機能が便利です

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 でも補完が効くようになりました。

cva内で Tailwind CSS IntelliSense の補完が効いている

Tailwind CSS は補完がないと正直書くのが面倒なので

Tailwind Regex Listを見ると、clsx や tailwind-variants などよく使われているものも対応できそうですので、環境が変わっても大体補完を追加することができそうです。

おわりに

Gaji-Labo はさまざまな技術スタックのフロントエンド開発や UI 改善に対応していますので、shadcn/ui や Tailwind CSS に限らず、プロダクト開発にお困りのスタートアップからのご相談は大歓迎です。
また、さまざまなチームや技術に触れながらスタートアップ支援をしてみたいというフロントエンドエンジニアがいれば、まずはカジュアルにお話する機会をいただければ嬉しいです。