<h2 class="e-heading">Tailwind CSS の不満点</h2><ul class="e-ul"><li class="e-li"><p class="e-p">テンプレート側がカオスになる問題</p></li><li class="e-li"><p class="e-p">状態に応じたユーティリティの付与</p></li></ul><h2 class="e-heading">今までの解決策</h2><p class="e-p"><strong>clsx</strong> によって class も文字列を分割できる（hover など纏めたり）</p><p class="e-p"><strong>clsx</strong> を使ってても Prettier によってソートできる</p><div class="e-link-card" data-href="https://github.com/lukeed/clsx" data-title="GitHub - lukeed/clsx: A tiny (239B) utility for constructing `className` strings conditionally." data-description="A tiny (239B) utility for constructing `className` strings conditionally. - luke…"><a class="e-link-card__anchor" href="https://github.com/lukeed/clsx" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">GitHub - lukeed/clsx: A tiny (239B) utility for constructing `className` strings conditionally.</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/github.com.ico" alt="" referrerpolicy="no-referrer" /><span>github.com</span></div></a></div><div class="e-link-card" data-href="https://github.com/lightsound/nexst-tailwind/blob/main/.vscode/settings.json" data-title="nexst-tailwind/.vscode/settings.json at main · lightsound/nexst-tailwind" data-description="Next.js starter template. Contribute to lightsound/nexst-tailwind development by…"><a class="e-link-card__anchor" href="https://github.com/lightsound/nexst-tailwind/blob/main/.vscode/settings.json" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">nexst-tailwind/.vscode/settings.json at main · lightsound/nexst-tailwind</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/github.com.ico" alt="" referrerpolicy="no-referrer" /><span>github.com</span></div></a></div><h2 class="e-heading">新しい解決策</h2><p class="e-p"><strong>cva</strong> で宣言的になり見やすくなるし、JSX とスタイリングに分けられる為、他のコンポーネントに使い回すこともできる。</p><div class="e-link-card" data-href="https://github.com/joe-bell/cva#how-can-i-create-responsive-variants-like-stitchesjs" data-title="GitHub - joe-bell/cva: Class Variance Authority" data-description="Class Variance Authority. Contribute to joe-bell/cva development by creating an …"><a class="e-link-card__anchor" href="https://github.com/joe-bell/cva#how-can-i-create-responsive-variants-like-stitchesjs" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">GitHub - joe-bell/cva: Class Variance Authority</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/github.com.ico" alt="" referrerpolicy="no-referrer" /><span>github.com</span></div></a></div><p class="e-p"><strong>shadcn/ui</strong> にも <strong>clsx</strong> と <strong>cva</strong> と <strong>Tailwind Merge</strong> は使用されてる。<strong>Tailwind Merge</strong> は同じクラスはマージしてくれる。</p><h2 class="e-heading">さらに新しい解決策</h2><p class="e-p"><strong>NextUI</strong> の ver2 より <strong>Tailwind Variants</strong> が用いられるように。</p><div class="e-link-card" data-href="https://github.com/nextui-org/tailwind-variants" data-title="GitHub - nextui-org/tailwind-variants: 🦄 Tailwindcss first-class variant API" data-description="🦄 Tailwindcss first-class variant API. Contribute to nextui-org/tailwind-variant…"><a class="e-link-card__anchor" href="https://github.com/nextui-org/tailwind-variants" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">GitHub - nextui-org/tailwind-variants: 🦄 Tailwindcss first-class variant API</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/github.com.ico" alt="" referrerpolicy="no-referrer" /><span>github.com</span></div></a></div><h2 class="e-heading">参照</h2><div class="e-link-card" data-href="https://it-kingdom.com/" data-title="IT KINGDOM - しまぶーのIT大学オンラインサロン" data-description="チャンネル登録者118000人のプログラミングYouTuber「しまぶー」によるオンラインサロン。ヤフーやクックパッドなど国内大手IT企業出身の現役エンジニアが…"><a class="e-link-card__anchor" href="https://it-kingdom.com/" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">IT KINGDOM - しまぶーのIT大学オンラインサロン</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/it-kingdom.com.ico" alt="" referrerpolicy="no-referrer" /><span>it-kingdom.com</span></div></a></div><p class="e-p"></p>

Tailwind CSS Course

Webエンジニアです！
<a href="https://bento.me/zksytmkn" rel="nofollow">bento.me/zksytmkn</a>