Tailwind のヒント: ユーティリティ クラスの長いリストを 1 行のコードで管理する

ユーティリティ クラスの長いリストを 1 行で管理すると、扱いにくくなることがあります。

コードをより読みやすく、管理しやすくするのに役立つ Tailwind の組み込み機能 @apply を次に示します。

カスタム CSS で @apply を使用する

Tailwind の @apply ディレクティブを使用すると、複数の Tailwind ユーティリティをグループ化することで、再利用可能な CSS クラスを作成できます。これにより、HTML 内のクラスの数が減り、コンポーネントがより整理された状態に保たれます。

例:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

その後、Tailwind ユーティリティを繰り返す代わりに、HTML でこの新しい .btn-primary クラスを使用できます。

役に立った場合は、次のことをサポートしてください:<p>
https://buymeacoffee.com/kaleemelahi<br>


</p>

<hr><p>詳細についてはフォローしてください:<strong></strong>
リンクトイン<br>
ギットハブ<br>


          </p>

            
        

以上がTailwind のヒント: ユーティリティ クラスの長いリストを 1 行のコードで管理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。