tailwind と Angular の両方を使用してプロジェクト全体でボタン スタイルをグローバルにする方法

Question

私は初心者で、Angular を調べていて、スタイリングに Tailwind を使用することにしました。すべての Tailwind クラスはインラインであるため、ボタンのスタイル クラスは巨大になり、ボタンを使用するには使用する必要があります。このクラスはどこにでもあります。これにより、コードが煩雑に見え、メンテナンスが面倒になります。

私の質問は、tailwind を使用してボタン スタイルをグローバルにする方法です。また、button-no-bg、button-bg-red# などの複数のボタン スタイルもあります。

##@apply ディレクティブを使用して、Angular の styles.css で定義してみました リーリー

コードの重複を避けるために、複数のボタン名とそれらに関連付けられたクラスを持つボタン クラスをグローバルにする方法を知りたいです。完全な答えではない場合は、参考資料を共有してください。

Answer 1

私は角度追い風を初めて使用するため、この方法が「より良い」方法であるかよくわかりませんが、別のより良い応答を待っています...

ドキュメントの指示に従います ただし、 styles.css 内の @tailwinds を除外し、それ以外の場合は新しいファイル styles-tailwinds.css

時間ごとに実行

リーリー

まず、styles-tailwinds.css を変更すると、src/output.css に新しいファイルが作成されます

angular.json を編集してこの .css を追加すると、配列スタイルは

のようになります。 リーリー