uttk

<h2 id="%E7%B5%90%E8%AB%96" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h2>
カスタムスタイルを定義するとき、v3 などでは以下のようにしろと書かれている 👇
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="4">@layer components {
 .card {
 background-color: var(--color-white);
 border-radius: var(--rounded-lg);
 padding: var(--spacing-6);
 box-shadow: var(--shadow-xl);
 }
}
</code></pre></div>v4 からは書き方が変わって以下のようにしないと入力補完が有効にならなくなった👇
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="17">@utility card {
 background-color: var(--color-white);
 border-radius: var(--rounded-lg);
 padding: var(--spacing-6);
 box-shadow: var(--shadow-xl);
}
</code></pre></div><h2 id="%E5%8F%82%E8%80%83" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<iframe id="zenn-embedded__c1f27accefd7a" src="https://embed.zenn.studio/card#zenn-embedded__c1f27accefd7a" data-content="https%3A%2F%2Fgithub.com%2Ftailwindlabs%2Ftailwindcss-intellisense%2Fissues%2F1188" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1188" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1188</a>
<iframe id="zenn-embedded__c67307afe5478" src="https://embed.zenn.studio/card#zenn-embedded__c67307afe5478" data-content="https%3A%2F%2Ftailwindcss.com%2Fdocs%2Fupgrade-guide%23adding-custom-utilities" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities</a>