Tailwind CSS を「DRY」に保つ

皆さん、こんにちは.今日は、TailwindCSS DRY を維持する方法に関するヒントを共有したいと思います (「自分を繰り返さないでください」).これを行う 1 つの方法は、コンポーネント クラスを抽出して、繰り返し要素全体で使用することです. (別の方法は、テンプレートのパーシャルまたは JavaScript コンポーネントを作成することですが、それ自体はまったく別の投稿です).ここでは、前者に焦点を当てます.

最初のステップは、プロジェクトのルートにある src フォルダーに style.css ファイルを配置することです. style.css 内には、次のコードがあります.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

}

中括弧の内側に、新しいユーティリティ コンポーネントを記述します.この例では、例としてボタンを作成します.

単に「btn」と呼びます. @layer コンポーネント ディレクティブを使用して、それらのスタイルがどのレイヤーに属しているかを Tailwind に伝え、Tailwind にそれらのスタイルを考慮してコンポーネント レイヤーをパージするように指示します.

標準の tailwind ユーティリティ クラスを使用して、ボタンのスタイルを定義します.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply w-48 px-4 py-2 text-lg font-medium tracking-wider text-white transition ease-in-out bg-teal-500 shadow-md rounded-3xl hover:bg-teal-400 hover:scale-105;
  }
}

アプリの最上位にある style.css ファイルをインポートすると、次の JSX を使用して、プロジェクトのすべてのボタンに新しい「btn」ユーティリティを使用できます.

<button className="btn">Click Me</button> 

または HTML:

<button class="btn">Click Me</button>

これにより、コードがよりきれいになり、プロジェクト全体で適切なレベルの統一性を維持するのに役立ちます.

この記事をお読みいただき、コンポーネント クラスを抽出するプロセスを簡素化し、コードを適切かつ DRY に保つのに役立つことを願っています.

読んでくれてありがとう、幸せなコーディング!