<h2 id="%E7%B5%8C%E7%B7%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 経緯</h2>
<p data-line="2" class="code-line">TailwindCSS初心者が shadcn/ui のコンポーネントを使用しよう思ったらclassNameの書き換えでつまづいた。<br>
shadcn/ui のclassNameは cva で書かれていてこれを書き換えようと思ってもPhpStorm補完が効かない。</p>
<h2 id="%E7%B5%90%E8%AB%96" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h2>
<p data-line="7" class="code-line">正規表現で設定を追加した。</p>
<p data-line="9" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/cbf26e98024b-20250918.png" class="md-img" loading="lazy"></p>
<p data-line="11" class="code-line">一番下の方のこれを</p>
<div class="code-block-container"><pre><code class="code-line" data-line="13">  "experimental": {
    "configFile": null,
    "classRegex": []
  }
</code></pre></div><p data-line="20" class="code-line">これに変更した。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="22">  "experimental": {
    "configFile": null,
    "classRegex": [
      ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
    ]
  }
</code></pre></div><h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 参考にしたサイト</h2>
<p data-line="33" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e922e8b2b6975" src="https://embed.zenn.studio/card#zenn-embedded__e922e8b2b6975" data-content="https%3A%2F%2Fwww.gaji.jp%2Fblog%2F2024%2F08%2F01%2F20308%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.gaji.jp/blog/2024/08/01/20308/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.gaji.jp/blog/2024/08/01/20308/</a></p>
<p data-line="35" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__816f37be0ea04" src="https://embed.zenn.studio/card#zenn-embedded__816f37be0ea04" data-content="https%3A%2F%2Fgithub.com%2Fpaolotiu%2Ftailwind-intellisense-regex-list" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/paolotiu/tailwind-intellisense-regex-list" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/paolotiu/tailwind-intellisense-regex-list</a></p>
<p data-line="37" class="code-line">以下の書き方は VS Code 用なので、PhpStorm用に↑の書き方に変更しました。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="39">"tailwindCSS.experimental.classRegex": [
  ["cva\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"]
]
</code></pre></div>

【PhpStorm】cva内の TailwindCSS の補完を有効にする

経緯

結論

参考にしたサイト

Discussion