Zenn
🥰

class-variance-authorityのautocompletion

2024/07/30に公開
Tailwind CSS
tech

shadcn/ui でも利用されている class-variance-authority (CVA)

Tailwind CSS 補完を有効にするための設定方法は、公式ドキュメントに記載されています

Getting Started with CVA - Installation

以下の設定を settings.json に追加することで、Tailwind CSS の補完が有効になります

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

この設定により、cva内のクラス名に対しても Tailwind CSS の補完が適用されるようになります

Discussion